Flutter-吸顶式表格组名TableView

最新推荐文章于 2024-04-17 15:57:49 发布

原创最新推荐文章于 2024-04-17 15:57:49 发布 · 2.5k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#flutter

这篇博客详细介绍了如何在Flutter中创建一个吸顶式的表格，包括设置表单组数、每组行数、自定义section header和cell item widget，以及调整header和item的高度等关键步骤。

class newlyProject extends StatefulWidget {
  @override
  _newlyProjectState createState() => _newlyProjectState();
}

class _newlyProjectState extends State<newlyProject> {
  @override

//表单组数

int sectionCount = 4;

// 每组有多少行（每组有多少个cell item）

 int _rowCountAtSection(int section) {
    if (section == 0) {
      return 4;
      在这里插入代码片} else if (section == 1) {
      return 4;
    }else if (section == 2) {
      return 3;
    } else {
      return 1;
    }
  }

// 创建每组的 section header widget

Widget _sectionHeaderBuilder(BuildContext context, int section) {
    return InkWell(
      onTap: () {
        print('基本信息');
      },
      child: Container(
        alignment: Alignment.centerLeft,
        padding: EdgeInsets.only(left: 16.0),
//        color: Color.fromARGB(1, 245, 245, 245),
      color: Colors.grey,
//        color: Colors.blue,
        height: 100,

        child: Text('I am section header -> section:$section',),

      ),
    );
  }

// 根据 section 和 row, 创建对应的 cell item widget

 Widget _cellBuilder(BuildContext context, int section, int row) {
    return InkWell(
      onTap: () {
        print('click cell item. -> section:$section row:$row');
      },
      child: Container(
        padding: EdgeInsets.only(left: 16.0),
        alignment: Alignment.centerLeft,
        decoration: BoxDecoration(
            border: Border(
                bottom: BorderSide(
//                  color: Color.fromARGB(1,216,216,216),
                color: Colors.grey
                ))),
        height: 50.0,

        child: Text('I am cell -> section:$section  row$row'),
      ),
    );
  }

// section header widget 的高度

double _sectionHeaderHeight(BuildContext context, int section) {
    return ScreenUtil().setHeight(24);
  }

// cell item widget 的高度

double _cellHeight(BuildContext context, int section, int row) {
    return ScreenUtil().setHeight(48);
  }

  Widget build(BuildContext context) {
    // 根据设计图宽高初始化
    ScreenUtil.instance = ScreenUtil(width: 375, height: 954)..init(context);
 return Scaffold(
      appBar: new AppBar(
        title: Text('新建项目',style: TextStyle(color: Colors.black),),
//        backgroundColor: Colors.white,
      ),
     body: new Center(
       child: FlutterTableView(
           sectionCount: sectionCount,
           rowCountAtSection: _rowCountAtSection,
           sectionHeaderBuilder: _sectionHeaderBuilder,
           cellBuilder: _cellBuilder,
           sectionHeaderHeight: _sectionHeaderHeight,
           cellHeight: _cellHeight
           ),
    	 ),
   	 );
  }
}