（1）Flutter 模块样式
decoration: BoxDecoration(样式属性)
颜色】 color
color: const Color(0xFF0099ff), //颜色
插入间隔】SizedBox()
const SizedBox(height: 5), //插入间隔
内外边距】padding
padding: const EdgeInsets.only(top: 10, left: 10), //内边距
margin: const EdgeInsets.all(20), //外边距
圆角边框】 borderRadius
borderRadius: BorderRadius.circular(20), //圆角边框大小
边框设计】border
// 边框设计 border: Border.all( color: const Color.fromARGB(255, 209, 38, 55), //颜色 width: 3, //边框大小 ),
边框阴影】boxShadow
// 边框阴影 boxShadow: const [ BoxShadow( color: Color.fromARGB(255, 217, 255, 0), //颜色 blurRadius: 10, //阴影宽度 ) ],
背景渐变】gradient
//背景线性渐变 LinearGradient //径向渐变 RadialGradient gradient: const LinearGradient( colors: [ Color.fromARGB(255, 255, 77, 0), //颜色 Color.fromARGB(255, 30, 26, 143), //颜色 ], ),
上下居中】alignment
alignment: const Alignment(0, 0), //上下居中】 上下值
mainAxisAlignment: MainAxisAlignment.center, //居中
水平/垂直 间距】spacing
spacing: 10, //水平间距
runSpacing: 15, //垂直间距
位移】alignment
alignment: Alignment(1.2, -1), //位移
alignment: Alignment.topLeft, //居左
外边距】margin
margin: const EdgeInsets.fromLTRB(0, 10, 0, 20), //外边距】 四边值
内边距】padding
padding: const EdgeInsets.fromLTRB(0, 10, 0, 10), //内边距】 四边值
旋转/位移/倾斜】transform
transform: Matrix4.translationValues(1, 2, 3), //位移】 左上右
transform: Matrix4.rotationY(1), //旋转】 X向上 Y向后 Z向左
transform: Matrix4.skew(0, 1), //倾斜】 X向右 Y向下
背景图片】image
/*设计背景图片 */
image: const DecorationImage(
image: NetworkImage("https"),
fit: BoxFit.cover, //图片显示模式 铺满显示
),置顶导航定位】Positioned
/* 置顶定位 */
Positioned(
left: 0, //定位坐标
top: 0, //定位坐标
// 标签
child: Container(Ï
child: const Text("二级导航标题"),
),
)（2）Flutter 标签样式
文本】Text
child: const Text( "你好", //内容 textAlign: TextAlign.right, //右居中 maxLines: 1, //显示行数 overflow: TextOverflow.ellipsis, //益出显示省略号 style: TextStyle( color: Color(0xffffffff), //颜色 fontSize: 20, //字体大小 textAlign: TextAlign.right, //右居中 fontWeight: FontWeight.bold, //字体变粗 fontStyle: FontStyle.italic, //字体倾斜 backgroundColor: Color.fromARGB(255, 203, 43, 43), //背景颜色 letterSpacing: 2, //字体间距 /* 字体底部横行 */ decoration: TextDecoration.underline, //字体底部横行 decorationColor: Color.fromARGB(255, 231, 239, 6), //字体底部横行颜色 ), ),
图片 】Image
/* 图片标签 */ child: Image.network( "img", scale: 2, //图片缩放 alignment: Alignment.center, //居中显示 width: double.infinity, fit: BoxFit.contain, //图片显示模式 repeat: ImageRepeat.repeat, //图片平铺 ),
本地图片】Image.asset()
//加载本地图片 return Container( width: 120, height: 120, //在 项目根目录下 pubspec.yaml 文件 flutter: => assets: 中配置本地图片 child: Image.asset( "images/flutter-logo.png", //本地图片地址 fit: BoxFit.cover, //图片显示模式 ), );
列表】ListTile
/* 列表 */
ListTile(
// 左侧
leading: Icon(
Icons.home,
color: Color(0xFf8977ff),
),
title: const Text("列表标题"),
subtitle: const Text("内容内容内容"),
//右侧
trailing: Image.network(
"https://img-s-msn-com.akamaized.net/tenant/amp/entityid/AA1aCc4z.img"),
),
const Divider(), //列表下横线按钮】ElevatedButton
//普通按钮
ElevatedButton(
//按钮样式
style: ButtonStyle(
backgroundColor: MaterialStateProperty.all(Colors.red), //背景颜色
foregroundColor: MaterialStateProperty.all(Colors.amber), //字体颜色
),
onPressed: () {}, //按下触发的事件
child: const Text("凸起按钮"), //按钮名称
),
//圆角按钮
ElevatedButton.icon(
// 样式设计
style: ButtonStyle(
// 形状设计
shape: MaterialStateProperty.all(
// 圆形/边框设计
RoundedRectangleBorder(
borderRadius: BorderRadius.circular(20), //圆角
),
),
),
onPressed: () {}, //触发事件
icon: const Icon(Icons.send),
label: const Text("发送3"),
),
//圆按钮
Container(
height: 60,
width: 60,
child: ElevatedButton(
// 样式设计
style: ButtonStyle(
// 形状设计
shape: MaterialStateProperty.all(
// 圆框设计
const CircleBorder(
//边框
side: BorderSide(
color: Color(0xffffffff),
),
),
),
),
onPressed: () {
print("ABCE");
}, //触发事件
child: const Text("圆按钮"),
),
),
],（3）Flutter 类型模块
圆形模块】return ClipOval()
//设计圆形图片 return ClipOval( child: Image.network( "jpg", width: 200, height: 200, fit: BoxFit.cover, ), );
居中模块】return Center()
//Center使模块居中 return Center( child: Container( width: 200, //宽度 height: 200, //高度 ), );
滚动长列表】return ListView()
//ListView 长滚动列表
return ListView(
children: [
/* 列表 */
ListTile(
// 左侧
leading: Icon(
Icons.home,
color: Color(0xFf8977ff),
),
title: const Text("列表标题"),
subtitle: const Text("内容内容内容"),
//右侧
trailing: Image.network(
"https://img-s-msn-com.akamaized.net/tenant/amp/entityid/AA1aCc4z.img"),
),
const Divider(), //列表下横线
],
);模块】 Container
//模块
Container(
alignment: Alignment.center, //模块居中
//模块样式
decoration: const BoxDecoration(
color: Color(0xfff234ff),
//设置四周圆角
borderRadius: BorderRadius.only(
topLeft: Radius.circular(30),
topRight: Radius.circular(30),
),
),
clipBehavior: Clip.hardEdge, //超出部分，可裁剪
//标签
child: Column(
children: [
Image.asset("./images/flutter-logo.png"),//本地图片Ï
const SizedBox(height: 5), //插入间隔
const Text("带样式", style: TextStyle(fontSize: 20)),//文本标签Ï
],
),
),卡片模式】Card()
//卡片模式
Card(
//Card的阴影效果
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10), //圆形
),
elevation: 10, //阴影深度
margin: const EdgeInsets.all(10), //外边距
child: Column(
children: const [
ListTile(
title: Text("zzz"),
subtitle: Text("12345678765"),
),
Divider(), //下横行
ListTile(
title: Text("zzz"),
subtitle: Text("12345678765"),
)
],
),
),（4）Flutter 内置API
取屏幕参数】MediaQuery
final size = MediaQuery.of(context).size; //获取屏幕 (使用方式 size.xxx)
随机生成key
key = UniqueKey();//随机生成key ，
key2 = ObjectKey( Box(Color:Colors.amber));//
key3 = ValueKey(“1”);
删除数组
Arrlist.removeAt(index);//删除列表数组
加载状态
child: CircularProgressIndicator(),//加载状态
Json转对象
objxxx.fromJson(jsonDecode(jsonxxx));
