价格行情首页

161 阅读1分钟

listView分组的实现思路

截屏2020-09-15 下午4.02.37.png

查了很多资料,并没有发现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();
 }
}

屏幕适配框架/导入一个三方库的姿势

参考资料

www.jianshu.com/p/3f6770f82…

注意

1.导入后,可以不重跑项目,但需运行flutter packages get

2.pubspec.yaml里严格注意格式,多个空格都会导入报错

 import 'package:flutter_screenutil/flutter_screenutil.dart';

flutter里组件大小的设置

奇怪的是大部分的组件都没有高度/宽度的属性,所以如果想设置他,需要给他包一层容器,通过设置外层容器的大小来设置他.

举例:设置一个textfield的高度

www.cnblogs.com/ChengYing-F…

Expanded组件

Row,Column组件里如果放listView,需要在listview外包一个Expanded组件,否则会报这个错

A RenderFlex overflowed by xxx pixels on the bottom

此外,他的基本用法也极其实用,可以设置平铺比例

www.jianshu.com/p/a2efa2326…