组件属性attr

在页面入口Pager中，我们在Text组件中, 调用了attr闭包，并在闭包里面指定Text组件的属性。

@Page("HelloWorld")
internal class HelloWorldPage : Pager() {

    override fun body(): ViewBuilder {
        return {
            attr {
                allCenter()
            }

            Text {
                attr {
                    text("Hello Kuikly")
                    fontSize(14f)
                }
            }
        }
    }
}

在Kuikly中, 每个组件都会有一个声明式的API, 例如TextView的声明式API为Text, 组件的声明式API内，含有attr方法，用于指定组件的属性。

在编写Kuikly代码时，每个组件都可通过attr {}闭包指定组件的属性。Attr可分为两大类

• 布局属性
• 样式属性

布局属性

布局属性用于指定组件的孩子如何布局。在原生开发中，不管是Android还是iOS系统，都有他们的一套布局规则。 在Android上布局规则比较多，有LinearLayout，RelativeLayout等；而iOS一般使用Frame布局。 Kuikly为了达到跨平台的目的，它不使用Android和iOS的布局规则，而是选择了跨平台的FlexBox布局作为Kuikly的布局规则。

建议

关于在Kuikly中如何布局，详细可参考Kuikly中布局, 建议先学习FlexBox布局规则后, 再继续以下教程

在上述例子中，我们在Pager的attr里面，指定了其孩子的布局规则，这两个属性表示让Pager的孩子居中布局

attr {
    allCenter()
}

如果想查阅组件支持的布局属性列表，可移步组件布局属性

Pager本身也是一个组件，因此也有attr闭包

样式属性

样式属性用于描述组件的UI样式，在Kuikly中，样式可分为两大类

• 基础样式：所有组件都支持的样式, Kuikly实现了一套css样式的子集，可作用于Kuikly的所有组件。例如：backgroundColor, boxShadow, border等属性
• 组件样式：组件特有的样式，例如Text组件有text和fontSize属性；Image组件有src属性

如果想查阅组件的支持的样式列表, 可移步组件文档

加载图片

下面我们在之前的例子上，添加上图片加载, 以演示在Kuikly中如何显示图片

@Page("HelloWorldPage")
internal class HelloWorldPage : Pager() {

    override fun body(): ViewBuilder {
        val ctx = this
        return {
            attr {
                allCenter()
            }

            Text {
                attr {
                    text("Hello Kuikly")
                    fontSize(20f)
                    fontWeightBold()
                }
            }

            Image {
                attr {
                    size(50f, 50f)
                    src("https://vfiles.gtimg.cn/wupload/xy/componenthub/TbyiIqBP.jpeg")
                }
            }
        }
    }
}

自定义属性

如果想要扩展组件的属性，可以参考组件自定义属性

下一步

学习完组件的属性之后, 我们下面来学习Kuikly中组件的事件