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)