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 组件
Icon(Icons.xxx)使用阿里图标库
官网下载相关图标资源将 ” .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
}
}使用字体图标
Icon(自定义Name.xxx)