flutter 布局
Container-div
padding: const EdgeInsets.all(8),
decoration: BoxDecoration(
color: gridItem.color, borderRadius: BorderRadius.circular(8)),
Container({
this.alignment,
this.padding, //容器内补白，属于decoration的装饰范围
Color color, // 背景色
Decoration decoration, // 背景装饰
Decoration foregroundDecoration, //前景装饰
double width,//容器的宽度
double height, //容器的高度
BoxConstraints constraints, //容器大小的限制条件
this.margin,//容器外补白，不属于decoration的装饰范围
this.transform, //变换
this.child,
...
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
EdgeInsets.all(8),
fromLTRB(double left, double top, double right, double bottom)：分别指定四个方向的填充。all(double value): 所有方向均使用相同数值的填充。only({left, top, right ,bottom })：可以设置具体某个方向的填充(可以同时指定多个方向)。symmetric({ vertical, horizontal })：用于设置对称方向的填充，vertical指top和bottom，horizontal指left和right
BoxDecoration({
Color color, //颜色
DecorationImage image,//图片
BoxBorder border, //边框
BorderRadiusGeometry borderRadius, //圆角
List<BoxShadow> boxShadow, //阴影,可以指定多个
Gradient gradient, //渐变
BlendMode backgroundBlendMode, //背景混合模式
BoxShape shape = BoxShape.rectangle, //形状
})
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
旋转布局
DecoratedBox(
decoration: BoxDecoration(),
child: Transform.rotate(
//旋转90度
angle: math.pi / 2,
child: PopupMenuButton(itemBuilder: (context) {
return [
const PopupMenuItem<Text>(child: Text('扫一扫')),
];
}),
),
)
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
注意：要使用math.pi需先进行如下导包。
import 'dart:math' as math;
1
# 绝对定位
Stack(
fit: StackFit.expand, //扩伸到Stack的大小。
alignment: Alignment.center, //指定未定位或部分定位widget的对齐方式
children: <Widget>[
Container(
child: Text("xxxxxx", style: TextStyle(color: Colors.white)),
color: Colors.pink,
),
Positioned(
left: 15.0,
top: 30.0,
child: Text("yyyyyy"),
),
Positioned(
top: 15.0,
child: Text("zzzzzz"),
)
],
);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
# 边框
底边
decoration: const BoxDecoration(
border: BorderDirectional(
bottom: BorderSide(color: Color(0xFFF2F2F2))))
1
2
3
2
3
全边
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(10),
border:
Border.all(color: color, width: 1.w, style: BorderStyle.solid)),
1
2
3
4
5
2
3
4
5
new Container(
height: 35,
width: MediaQuery.of(context).size.width - 140,
decoration: BoxDecoration(
border:Border(bottom:BorderSide(width: 1,color: Color(0xffe5e5e5)) )
// border: Border.all(color: Colors.grey,width: 0.5),
// borderRadius: BorderRadius.circular(5),
),
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
阴影
BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(6.0),
boxShadow: [
//卡片阴影
BoxShadow(
color: Colors.black.withOpacity(0.2),
offset: const Offset(2.0, 2.0),
blurRadius: 4.0,
)
])
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
# tabbar 下划线
indicator: UnderlineTabIndicator(
borderSide: BorderSide(width: 4, color: Colors.white), // Tab下划线
insets: EdgeInsets.symmetric(horizontal: 20))),
1
2
3
2
3
# 三点省略号 ...
Text(
'aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa',
softWrap: true,
textAlign: TextAlign.left,
overflow: TextOverflow.ellipsis,
maxLines: 3,
style: TextStyle(
fontSize: 14,
),
),
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
# Flutter常用widget ——IntrinsicHeight
IntrinsicHeight(
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Container(width: 50,color: Colors.green),
Container(height: 100,width: 50,color: Colors.red),
Container(width: 50,color: Colors.black)
],
),
);
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
# 时间选择器
日期时间范围选择器
void showDateSelect() async {
//获取当前的时间
DateTime start = DateTime.now();
//在当前的时间上多添加4天
DateTime end = DateTime(start.year, start.month, start.day + 4);
//显示时间选择器
var selectTimeRange = await showDateRangePicker(
//语言环境
locale: const Locale("zh", "CH"),
context: context,
//开始时间
firstDate: DateTime(2020, 1),
//结束时间
lastDate: DateTime(2024, 1),
cancelText: "取消",
confirmText: "确定",
//初始的时间范围选择
// initialDateRange:
// DateTimeRange(start: DateTime.now(), end: DateTime.now()),
);
//结果
dateSelectText = selectTimeRange.toString();
//选择结果中的开始时间
DateTime? selectStart = selectTimeRange?.start;
//选择结果中的结束时间
DateTime? selectEnd = selectTimeRange?.end;
setState(() {
print(selectStart);
print(selectEnd);
});
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
时间选择器
RaisedButton(
onPressed: () async {
var result = await showDatePicker(
context: context,
initialDate: DateTime.now(),
firstDate: DateTime(2020),
lastDate: DateTime(2021));
print('$result');
},
)
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
# 直接跳转新页面
value = await Navigator.push(
context,
MaterialPageRoute(
builder: (context) => TFormSelectorPage(
title: title,
options:
options!.every((element) => (element is TFormOptionModel))
? <TFormOptionModel>[...?options]
: options?.map((e) {
return TFormOptionModel(value: e.toString());
}).toList(),
isMultipleSelector: isMultipleSelector),
),
);
print(value);
controller.text = value;
formFeild.value = value;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
# 关闭弹窗
Navigator.of(context).pop(…)方法来关闭对话框的，这和路由返回的方式是一致的，
上次更新: 2022/12/11, 02:32:13