Container 容器组件
名称 | 功能 |
---|
alignment | 对齐方式 |
decoration | 容器的样式调用 BoxDecoration 类 |
margin | 外边距 EdgeInsets.all (10.0) |
padding | 外边距 同上 |
transform | 动画属性 transform: Matrix4.rotationZ (0.2) |
height | 高度 |
width | 宽度 |
child | 子元素 |
| Container( alignment: Alignment.center, height: 200, width: 200, decoration: const BoxDecoration( color: Colors.yellow, ), child: const Text("hello flutter") ) |
Text 文字组件
属性 | 作用 |
---|
textAlign | 对齐方式 |
textDireetion | 文本方向 ltr 左到右 rtl 右到左 |
overflow | 溢出处理 clip 裁剪 \ fade 渐隐 \ ellipsis 省略号 |
maxLines | 文字最大行数 |
style | 字体的样式设置 |
| Text( "hello flutter", textAlign: TextAlign.center, textDirection: TextDirection.ltr, maxLines: 1, overflow: TextOverflow.ellipsis, ) |
Image 图片组件
名称 | 说明 | 类型 |
---|
alignment | 对齐方式 | Alignment |
color / colorBlendMode | 一般和 colorBlendMode 一起使用,背景色和图片颜色可以融合 | |
fit | fill 拉伸 /contain 原比例 /cover 自适应显示 /fitWidth 宽度充满 /fitHeight 高度充满 | BoxFit |
repeat | 平铺 | |
width | 宽度 | |
height | 高度 | |
加载本地图片 Image.asset (url)
配置 pybspec.yaml 文件 assetc 中配置;规则:需要原图 2.x 3.x 三个文件夹 存放同名资源
加载远程图片 Image.network (src)
圆形图片实现方式
方案一 Container 方式
使用 container 组件变成圆形,设置背景图片即可边圆形
| Container( width:100, height:100, decoration:BoxDecoration( nprderRadius:BorderRadius.curcular(100), imag:const DecorationImage( image:NetworkImage("url"), fit:BoxFit.cover ) ) ) |
方案二 ClipOval 圆形图片
| ClipOval( child: Image.network( "url", width: 150.0, height: 150.0, fit: BoxFit.cover ), ) |
方案三 CircleAvatar 实现圆形图片
| const CircleAvatar( radius: 200, backgroundImage: NetworkImage("https://www.itying.com/images/flutter/3.png"), ) |
Icon 图标组件
flutter 内置了部分 icon 组件
使用阿里图标库
官网下载相关图标资源将 ” .ttf ” 和 ” .json ” 文件拷贝到 fonts 文件夹中
配置 pubspec.yaml 文件中配置
| fonts: - family: 自定义Name fonts: - asset: fonts / xxx.ttf |
新建字体 alIcon.dart 文件夹,创建 AlIcon 类
| class AlIcon{ static const IconData xxx = IconData{ 0xuncode, fontFamily:'自定义Name', matchTextDirection:true } } |
使用字体图标