1、Column中空Text会占一定空间
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Container(
width: double.infinity,
height: double.infinity,
child: Column(
children: <Widget>[
Container(), //不占空间
SizedBox(), //不占空间
Expanded(
child: Container(
color: Colors.red,
child: Row(
children: <Widget>[
Text(''),
Expanded(
child: Container(
height: 3,
color: Colors.yellow,
),
),
Text('')//在Row中空Text会不占空间
],
),
),
),
Text('') //Column中空Text会占一定空间
],
),
),
);
}
效果图.png
说明：Column中空Text会占一定空间，会影响布局效果，这空间大小跟文字设置的大小有关；建议用Container，SizedBox来替换，一般在动态控制一些view的加载会用到，不需要加载直接返回Container或SizeBox；
2、Row和Column不同版本sdk默认对齐方式不同
Row({
Key key,
MainAxisAlignment mainAxisAlignment = MainAxisAlignment.start,
MainAxisSize mainAxisSize = MainAxisSize.max,
CrossAxisAlignment crossAxisAlignment = CrossAxisAlignment.center,
TextDirection textDirection,
VerticalDirection verticalDirection = VerticalDirection.down,
TextBaseline textBaseline,
List<Widget> children = const <Widget>[],
}) : super(
children: children,
key: key,
direction: Axis.horizontal,
mainAxisAlignment: mainAxisAlignment,
mainAxisSize: mainAxisSize,
crossAxisAlignment: crossAxisAlignment,
textDirection: textDirection,
verticalDirection: verticalDirection,
textBaseline: textBaseline,
);
}
Column({
Key key,
MainAxisAlignment mainAxisAlignment = MainAxisAlignment.start,
MainAxisSize mainAxisSize = MainAxisSize.max,
CrossAxisAlignment crossAxisAlignment = CrossAxisAlignment.center,
TextDirection textDirection,
VerticalDirection verticalDirection = VerticalDirection.down,
TextBaseline textBaseline,
List<Widget> children = const <Widget>[],
}) : super(
children: children,
key: key,
direction: Axis.vertical,
mainAxisAlignment: mainAxisAlignment,
mainAxisSize: mainAxisSize,
crossAxisAlignment: crossAxisAlignment,
textDirection: textDirection,
verticalDirection: verticalDirection,
textBaseline: textBaseline,
);
}
说明：早期版本sdk Row和Column 默认的对齐参数MainAxisAlignment和CrossAxisAlignment都为start，现在新版的sdk变化了，CrossAxisAlignment变为center，所以对于频繁使用的 Row和Column，建议写时添加对齐方式，不依赖sdk默认，避免升级sdk大面积修改,也可以直接封装Row和Column；
3、不同sdk字体加粗bold值不同
/// The default font weight.
static const FontWeight normal = w400;
/// A commonly used font weight that is heavier than normal.
static const FontWeight bold = w700;
说明：早期版本sdk字体加粗FontWeight bold为w500，新版本sdk为w700，所以建议封装FontWeight ，有利于界面样式统一，封装如下：
class ZXFontWeight {
ZXFontWeight._();
//正常
static const FontWeight normal = FontWeight.w400;
//中粗
static const FontWeight medium = FontWeight.w500;
//加粗
static const FontWeight bold = FontWeight.w700;
}
4、ListView嵌入到SingleChildScrollView、ListView或Column
@override
Widget build(BuildContext context) {
ListView childListView = ListView.builder(
itemCount: 10,
//shrinkWrap：内容适配
//shrinkWrap默认为false；
//当为false时，显示不出来，并报Vertical viewport was given unbounded height错误
shrinkWrap: true,
//禁止滑动，去掉会有滑动冲突
physics: NeverScrollableScrollPhysics(),
itemBuilder: (BuildContext context, int index) {
return Container(
color: Colors.primaries[index % Colors.primaries.length],
child: SizedBox(
width: 100.0,
height: 50.0 + ((27 * index) % 15) * 3.14,
child: Center(
child: Text('$index'),
),
),
);
},
);
ListView listView = ListView.builder(
itemCount: 5,
itemBuilder: (BuildContext context, int index) {
return childListView;
},
);
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: listView,
);
}
效果.gif
说明：
- ListView嵌入到SingleChildScrollView、ListView或Column内容会显示不出来；
- shrinkWrap: true 将参数shrinkWrap设置为true可解决问题：shrinkWrap为内容适配，默认为false，当为false时，显示不出来，并报Vertical viewport was given unbounded height错误；
- physics: NeverScrollableScrollPhysics() 禁止滑动，去掉会有滑动冲突
5、GridView嵌入到SingleChildScrollView、ListView或Column
@override
Widget build(BuildContext context) {
GridView childGridView = GridView.count(
//shrinkWrap：内容适配
//shrinkWrap默认为false；
//当为false时，显示不出来，并报Vertical viewport was given unbounded height错误
shrinkWrap: true,
//禁止滑动，去掉会有滑动冲突
physics: NeverScrollableScrollPhysics(),
crossAxisCount: 3,
children: <Widget>[
Text(
'123',
textAlign: TextAlign.center,
),
Text(
'123',
textAlign: TextAlign.center,
),
Text(
'123',
textAlign: TextAlign.center,
),
],
);
ListView listView = ListView.builder(
itemCount: 10,
itemBuilder: (BuildContext context, int index) {
return childGridView;
},
);
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: listView,
);
}
效果.gif
说明：
- GridView嵌入到SingleChildScrollView、ListView或Column内容会显示不出来；
- shrinkWrap: true 将参数shrinkWrap设置为true可解决问题：shrinkWrap为内容适配，默认为false，当为false时，显示不出来，并报Vertical viewport was given unbounded height错误；
- physics: NeverScrollableScrollPhysics() 禁止滑动，去掉会有滑动冲突
6、横向ListView高度随内容自适应
@override
Widget build(BuildContext context) {
Widget child = Container(
alignment: Alignment.centerLeft,
color: Colors.red,
child: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
//横向ListView无论怎么设置，都必须固定死高度，才会显示出来；
//使用SingleChildScrollView+Row可实现横向ListView高度随内容自适应
SingleChildScrollView(
scrollDirection: Axis.horizontal,
child: Row(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
child: Text('我只有这么多内容'),
color: Colors.blue,
),
SizedBox(
width: 10,
),
Container(
child: Text('我的内容多一些'),
color: Colors.blue,
),
SizedBox(
width: 10,
),
Container(
child: Text('我的内容多一些\n我的内容多一些'),
color: Colors.blue,
),
SizedBox(
width: 10,
),
Container(
child: Text('我的内容多一些\n我的内容多一些\n我的内容多一些'),
color: Colors.blue,
),
SizedBox(
width: 10,
),
Container(
child: Text('我的内容多一些\n我的内容多一些\n我的内容多一些\n我的内容多一些'),
color: Colors.blue,
),
],
),
),
],
),
);
ListView listView = ListView.separated(
itemCount: 10,
itemBuilder: (BuildContext context, int index) {
return child;
},
separatorBuilder: (BuildContext context, int index) {
return SizedBox(
height: 20,
);
},
);
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: listView,
);
}
效果.gif
说明：
- 横向ListView无论怎么设置，都必须固定死高度，才会显示出来，否则内容显示不出来；
- 使用SingleChildScrollView+Row可实现横向ListView高度随内容自适应
7、??号使用和易错地方
int c;
print(c??=5);//如果c为null的话，把5赋值给c
b ??= value;
如果b为空，则将value赋值给b；否则，b保持不变
expr1 ?? expr2
如果expr1为非空，则返回其值；expr1为空，则计算并返回expr2的值
易错：
void setKey(String key,{String keyPrefix}){
String _key=keyPrefix??'zxx_'+key;
//有问题，为空时，值为’zxx_’+key;不为空时，值为keyPrefix
}
正确：
void setKey(String key,{String keyPrefix}){
String _key=(keyPrefix??'zxx')+key;
}
