一、Text
Text组件用于在界面上展示一段文本信息,可以包含子组件Span。
![](https://i-blog.csdnimg.cn/blog_migrate/c2e59634f0cbd35fb3b7911bfc6053c8.png)
二、image
Image组件用来渲染展示图片,它可以让界面变得更加丰富多彩。
Image组件支持加载网络图片,将图片地址换成网络图片地址进行加载。
例如:Image('https://www.example.com/xxx.png')
使用objectFit属性设置图片的缩放类型,objectFit的参数类型为ImageFit。
例如:.objectFit(ImageFit.*****)
ImageFit包含以下几种类型:
Contain:保持宽高比进行缩小或者放大,使得图片完全显示在显示边界内。
![](https://i-blog.csdnimg.cn/blog_migrate/a51fb3c01cd99dc5cca304e0ad9aea94.png)
Cover(默认值):保持宽高比进行缩小或者放大,使得图片两边都大于或等于显示边界。
![](https://i-blog.csdnimg.cn/blog_migrate/4018bd022b658157f07d789babff02c5.png)
Auto:自适应显示。
![](https://i-blog.csdnimg.cn/blog_migrate/1f0be569b28eee5d89ad1f9f41af33ef.png)
Fill:不保持宽高比进行放大缩小,使得图片充满显示边界。
![](https://i-blog.csdnimg.cn/blog_migrate/5faa4aa6bf1a57e16d2de6c6be42dc7f.png)
ScaleDown:保持宽高比显示,图片缩小或者保持不变。
![](https://i-blog.csdnimg.cn/blog_migrate/e702b37f2132bdff3101a7bd603f9408.png)
None:保持原有尺寸显示。
![](https://i-blog.csdnimg.cn/blog_migrate/c4d6756a8b97de657884496c31976cd4.png)
三、TextInput
TextInput组件用于输入单行文本,响应输入事件。TextInput的使用也非常广泛,例如应用登录账号密码、发送消息等。
设置输入提示文本
![](https://i-blog.csdnimg.cn/blog_migrate/9df58e674aa1cd7901bda44d48e3604f.png)
type的参数类型为InputType,包含以下几种输入类型:
Normal:基本输入模式。支持输入数字、字母、下划线、空格、特殊字符。
Password:密码输入模式。
Email:e-mail地址输入模式。
Number:纯数字输入模式。
四、Button
Button组件主要用来响应点击操作,可以包含子组件。
Capsule:胶囊型按钮(圆角默认为高度的一半)。
Circle:圆形按钮。
Normal:普通按钮(默认不带圆角)。
五、Column&Row组件的使用
Column表示沿垂直方向布局的容器。
Row表示沿水平方向布局的容器。
![](https://i-blog.csdnimg.cn/blog_migrate/1f371afc8dc87150939b550db76e9190.png)