如何修改DataTable中DataRow分割线颜色且不影响表头行
解决方案
方案1:嵌套Theme单独覆盖表头分割线
外层Theme设置普通数据行的分割线颜色,再给所有DataColumn的label组件单独套一层Theme,自定义表头的分割线颜色即可:
Center( child: Theme( // 外层配置普通数据行的分割线为灰色 data: Theme.of(context).copyWith(dividerColor: Colors.grey), child: DataTable( columns: [ DataColumn( // 单独覆盖表头的分割线颜色,可改为你需要的表头分割线样式,比如默认黑色或者透明 label: Theme( data: Theme.of(context).copyWith(dividerColor: Colors.black), child: Text("列名1"), ), ), DataColumn( label: Theme( data: Theme.of(context).copyWith(dividerColor: Colors.black), child: Text("列名2"), ), ), // 其余列同理配置 ], rows: const [ // 普通数据行默认沿用外层Theme的灰色分割线,无需额外配置 DataRow(cells: [ DataCell(Text("内容1")), DataCell(Text("内容2")), ]), DataRow(cells: [ DataCell(Text("内容3")), DataCell(Text("内容4")), ]), ], ), ), )
方案2:关闭默认分割线,手动给数据行加边框(灵活度更高)
如果需要更灵活的控制分割线样式,可以先把默认分割线设为透明,再单独给普通数据行加底部边框:
Center( child: Theme( // 先关闭DataTable默认的所有分割线 data: Theme.of(context).copyWith(dividerColor: Colors.transparent), child: DataTable( columns: const [ DataColumn(label: Text("列名1")), DataColumn(label: Text("列名2")), ], rows: [ // 普通数据行手动添加灰色底部分割线 DataRow( decoration: const BoxDecoration( border: Border(bottom: BorderSide(color: Colors.grey, width: 1)), ), cells: const [ DataCell(Text("内容1")), DataCell(Text("内容2")), ], ), DataRow( decoration: const BoxDecoration( border: Border(bottom: BorderSide(color: Colors.grey, width: 1)), ), cells: const [ DataCell(Text("内容3")), DataCell(Text("内容4")), ], ), ], ), ), )
内容的提问来源于stack exchange,提问作者user3808307
相关产品推荐
相关产品推荐

