- 如果页面整个空白,说明页内有错误,可以分别注释排查
*Textfield
不能直接放在Row中,因为不确定Textfield
的宽度,可以在外边包一个Expanded
撑满内容。
❌
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
👉TextField()
]
)
✅
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
👉Expanded(
child: TextField(),
)👈
]
)
- 传参的时候构造方法里的参数要加
this
,否则传不过来。
❌
Login({Key key, 👉changeTabbar, 👉ss}):super(key:key);
✅
Login({Key key, 👉this.changeTabbar, 👉this.ss}):super(key:key);
-
Navigator.push
方法不能在根Widget
为MaterialApp
的组件中使用,会报错
❌
@override
Widget build(BuildContext context) {
return 👉MaterialApp👈(
home: Home(
...
FlatButton(
onPressed: () {
Navigator.push(...)
},
child: Text(
"登陆",
)
),
);
}
✅
@override
Widget build(BuildContext context) {
return 👉Scaffold👈(
body: Home(
...
FlatButton(
onPressed: () {
Navigator.push(...)
},
child: Text(
"登陆",
)
),
);
}
*FlatButton
不写onPressed
背景颜色color
属性出不来效果
❌
FlatButton(👇
child: Text("登陆"),
),
color: Color(0xffecbe4b)
)
✅
FlatButton(
👉onPressed: login,👈
child: Text("登陆"),
),
color: Color(0xffecbe4b)
)
- 使用AS写Flutter的时候经常很卡或卡死,尤其是用
Color
的时候。原因是Flutter是用markdown语法解析注释,但注释中有很多存放在github上的图片,加载的时候会引起卡死。找到文档,将注释中的![xxx](http://xxx)
改为[xxx](http://xxx)
即可,也就是将!去掉 - Flutter自带的控件都是安卓风格,如果要iOS风格的控件Flutter官网也已经给大家写好了,中文版可以看Flutter中文网
- 一个
Row
中使用两个Text
时,当文字过长报警告问题。如图所示蓝色框起来的Text
将绿色Text
挤出了屏幕。这个问题是因为两个文字优先级相同当某一个文字过长时默认优先处理前一个文字,后一个文字就不管了
修改方法很简单,给第一个Text
包裹一个Expanded
控件,使他明确自己的定位,系统就可以处理好他的布局了
❌
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
👉Text(
'描述',
maxLines: 1,
overflow: TextOverflow.ellipsis,
style: TextStyle(color: Color(0xff666666)),
),👈
Text(
"¥金额",
style: TextStyle(
color: Colors.red,
fontWeight: FontWeight.bold),
)
],
)
✅
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
👉Expanded(
child: Text(
'描述',
maxLines: 1,
overflow: TextOverflow.ellipsis,
style: TextStyle(color: Color(0xff666666)),
),👈
),
Text(
"¥$金额",
style: TextStyle(
color: Colors.red,
fontWeight: FontWeight.bold),
),
],
)
修改后效果如图
- ListView顶部空白,ListView有时候头部有一段空白。是因为当ListView没有和AppBar一起使用时,头部会有一个padding,可以使用MediaQuery.removePadding去掉padding:
❌
ListView()
✅
👉MediaQuery.removePadding(
👉removeTop: true,
child:ListView()
)👈
- 假设有WidgetA和WidgetB,A引用了B,在A中setState。如果在B的State中使用的是this.widget.xxx就可以刷新。如果是在B的createState中直接传递的值则不能刷新。也就是B的State使用的this.xxx的话外部刷新内部是不会刷新的。