listView分组的实现思路
查了很多资料,并没有发现flutter有可以直接设置表头分组的属性或接口,现在采用了一种表格嵌套表格的方式实现.
参考资料
https://blog.csdn.net/qq_35905501/article/details/97126583
关键代码
//第一层listview
ListView.builder(
itemCount: _list == null ? 0 : _list.length,
itemBuilder: this._getItems),
)
//第一层listview的单元行
Widget _getItems(context, index) {
if (4 > 0) {
return Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
mainAxisSize: MainAxisSize.max,
verticalDirection: VerticalDirection.down,
// textDirection:,
textBaseline: TextBaseline.alphabetic,
children: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.start,
mainAxisSize: MainAxisSize.max,
children: <Widget>[
Icon(Icons.star),
Text(_list[index]["province"])
],
),
//第二层listview
ListView.builder(
itemCount: _list[index]["list"].length,
shrinkWrap: true,
physics: new NeverScrollableScrollPhysics(),
itemBuilder: (contexts, indexs) {
return Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
mainAxisSize: MainAxisSize.max,
children: <Widget>[
Text(_list[index]["list"][indexs]["area"]),
Text(_list[index]["list"][indexs]["shell_color"]),
Text(_list[index]["list"][indexs]["today"]),
Text(_list[index]["list"][indexs]["yesterday"]),
Text(_list[index]["list"][indexs]["spread"],
textAlign: TextAlign.center,
style: TextStyle(
color: Colors.white, //- 设置字体颜色
backgroundColor: Colors.green)),
],
);
//....一些布局代码
},
)
],
);
} else {
return ListTile();
}
}
屏幕适配框架/导入一个三方库的姿势
参考资料
注意
1.导入后,可以不重跑项目,但需运行flutter packages get
2.pubspec.yaml里严格注意格式,多个空格都会导入报错
import 'package:flutter_screenutil/flutter_screenutil.dart';
flutter里组件大小的设置
奇怪的是大部分的组件都没有高度/宽度的属性,所以如果想设置他,需要给他包一层容器,通过设置外层容器的大小来设置他.
举例:设置一个textfield的高度
Expanded组件
Row,Column组件里如果放listView,需要在listview外包一个Expanded组件,否则会报这个错
A RenderFlex overflowed by xxx pixels on the bottom
此外,他的基本用法也极其实用,可以设置平铺比例