Flutter-吸顶式表格组名TableView

这篇博客详细介绍了如何在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
           ),
    	 ),
   	 );
  }
}
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值