线性布局
线性布局(LinearLayout)是开发中最常用的布局,通过线性容器Row和Column构建。线性布局是其他布局的基础,其子元素在线性方向上(水平方向和垂直方向)依次排列。线性布局的排列方向由所选容器组件决定,Column容器内子元素按照垂直方向排列,Row容器内子元素按照水平方向排列。根据不同的排列方向,开发者可选择使用Row或Column容器创建线性布局。
基本概念
布局容器:
具有布局能力的容器组件,可以承载其他元素作为其子元素,布局容器会对其子元素进行尺寸计算和布局排列。
布局子元素:
布局容器内部的元素。
主轴:
线性布局容器在布局方向上的轴线,子元素默认沿主轴排列。Row容器主轴为水平方向,Column容器主轴为垂直方向。
交叉轴:
垂直于主轴方向的轴线。Row容器交叉轴为垂直方向,Column容器交叉轴为水平方向。
间距:
布局子元素的间距。
1.垂直布局
元素垂直向下排列
Text('这是列").backgroundcolor('red')
Text('元素垂直向下排列').backgroundColor('blue')
Text('这是列').backgroundcolor('green')
Text('元素垂直向下排列').backgroundcolor('black')
2.水平布局
元素水平方向排列
Text('行布局').backgroundColor
3.常用组件
3.1 Text文本
Text是文本组件,通常用于展示用户视图,如显示文章的文字。
![](https://i-blog.csdnimg.cn/direct/5d1a320a6a0f4f0995153a43d2c65e51.png)
3.2 按钮
Button是按钮组件,通常用于响应用户的点击操作,其类型包括胶囊按钮、圆形按钮、普通按钮。
Button做为容器使用时可以通过添加子组件实现包含文字、图片等元素的按钮。
Button有三种可选类型:
分别为胶囊类型(Capsule)、圆形按钮(Circle)和普通按钮(Normal),通过type进行设置。
胶囊按钮(默认类型):此类型按钮的圆角自动设置为高度的一半,不支持通过borderRadius属性重新设置圆角。
Button('胶囊按钮'{type:ButtonType.Capsule,stateEffect:true})
圆形按钮:此类型按钮为圆形,不支持通过borderRadius属性重新设置圆角。
Button('圆形按钮'{type:ButtonType.circle,stateEffect:true})
普通按钮:此类型的按钮默认圆角为0,支持通过borderRadius属性重新设置圆角。
Button('普通按钮'{type:ButtonType.Normal,stateEffect:false})
3.3 文本输入
TextInput、TextArea是输入框组件,通常用于响应用户的输入操作,比如评论区的输入、聊天框的输入、表格的输入等,也可以结合其它组件构建功能页面,例如登录注册页面。
//文本输入框 placeholder:“账号,text:"admin"//placeholder 输入的提示,text:默认值
TextInput({
placeholder:"账号"text:"admin''})
//默认,有圆角的输入框
TextInput({
placeholder:"请输入密码"
子)
type(InputType.Password)//文本框的输入框类型:密码
.borderRadius(10)//圆角
backgroundColor("green")