datatable中某一列最小值_【Flutter】DataTable数据表格组件

说明

DataTable控件显示表格数据。

基本用法：

DataTable(
  columns: [
    DataColumn(label: Text('名称')),
    DataColumn(label: Text('内容')),
  ],
  rows: [
    DataRow(cells: [
      DataCell(Text('码上加油站')),
      DataCell(Text('FLutter')),
    ]),
  ],
)

常用属性

DataTable属性：

属性名	类型	描述
columns	List	表头
rows	List	内容行
sortColumnIndex	int	显示排序图标的索引
sortAscending	bool	升序或者降序
onSelectAll	ValueSetter	点击全选

DataColumn属性：

属性名	类型	描述
label	Widget	标签文本或者size=18图标
tooltip	String	提示
numeric	bool	默认false，true的时候让某一列右对齐
onSort	DataColumnSortCallback	排序时回调

DataRow属性：

属性名	类型	描述
selected	bool	选中
onSelectChanged	ValueChanged	设置了onSelectChanged参数，在数据的每一行和表头的前面显示勾选框
cells	子项	List
index	int	索引DataRow.byIndex特有

DataCell属性：

属性名	类型	描述
child	Widget	子控件
placeholder	bool	占位符
showEditer	bool	显示编辑图标
onTap	VoidCallback	点击

示例演示

import 'package:flutter/material.dart';
import 'package:flutterstudydemo/model/post.dart';

class DataTableDemo extends StatefulWidget {
  @override
  StatecreateState() {
    return DataTableDemoState();
  }
}

class DataTableDemoState extends State<DataTableDemo> {
  int _sortColumnIndex;
  bool _sortAscending = true;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Demo"),
      ),
      body: ListView(
        children: [
          DataTable(
            columns: [
              DataColumn(
                label: Text('序号'),
              ),
              DataColumn(
                label: Text('名称'),
                tooltip: '长按提示',
              ),
              DataColumn(
                label: Text('内容'),
                numeric: true,
              ), //让某一列右对齐
            ],
            rows: [
              DataRow(
                cells: [
                  DataCell(Text('1')),
                  DataCell(
                    Text('码上加油站'),
                    showEditIcon: true, //需要ontap配合使用
                    onTap: () {
                      print("编辑处理");
                    },
                  ),
                  DataCell(Text('FLutter')),
                ],
              ),
              DataRow(
                cells: [
                  DataCell(Text('2')),
                  DataCell(
                    Text('码上加油站'),
                    placeholder: true,//设置为true，文字的样式发生变化
                    showEditIcon: true,//显示编辑图标
                    onTap: () {},//点击回调
                  ),
                  DataCell(Text('FLutter')),
                ],
              ),
            ],
          ),
          SizedBox(
            height: 10,
          ),
          SingleChildScrollView(//当表格列比较多的时候，可以使用SingleChildScrollView包裹DataTable，显示不全时滚动显示
            scrollDirection: Axis.horizontal,
            child: DataTable(
              sortColumnIndex: _sortColumnIndex,
              sortAscending: _sortAscending,// onSelectAll: (bool value) {},
              columns: [
                DataColumn(
                  label: Text('动物'),
                  onSort: (int columnIndex, bool ascending) {//用户点击表头(DataColumn)时的回调
                    setState(() {
                      _sortColumnIndex = columnIndex; //columnIndex表示索引
                      _sortAscending = ascending; //ascending参数表示升序或者降序//排序算法
                      posts.sort((a, b) {if (!ascending) {final c = a;
                          a = b;
                          b = c;
                        }return a.title.length.compareTo(b.title.length);
                      });
                    });
                  },
                ),
                DataColumn(
                  label: Text('作者'),
                ),
                DataColumn(
                  label: Text('图片'),
                ),
                DataColumn(
                  label: Text('描述'),
                ),
              ],
              rows: posts.map((post) {return DataRow(
                    selected: post.selected, //selected参数为true可以显示其中一行被选中
                    onSelectChanged: (bool value) {
                      setState(() {if (post.selected != value) {
                          post.selected = value;
                        }
                      });
                    },
                    cells: [
                      DataCell(Text(post.title)),
                      DataCell(Text(post.author)),
                      DataCell(
                        Container(
                          width: 60,
                          child:
                              Image.network(post.imageUrl, fit: BoxFit.cover),
                        ),
                      ),
                      DataCell(Text(post.description)),
                    ]);
              }).toList(),
            ),
          )
        ],
      ),
    );
  }
}

数据类：

class Post {
  Post({
    this.title,
    this.author,
    this.imageUrl,
    this.description,
  });

  final String title;
  final String author;
  final String imageUrl;
  final String description;

  bool selected = false;
}

final List posts = [
  Post(
    title: '猫',
    author: '老猫',
    description: '这条猫有九条命，你信吗？',
    imageUrl: 'https://resources.ninghao.org/images/candy-shop.jpg',
  ),
  Post(
    title: '狗',
    author: '老狗',
    description: '这条狗救了我的命。',
    imageUrl: 'https://resources.ninghao.org/images/childhood-in-a-picture.jpg',
  ),
  Post(
    title: '兔',
    author: '老兔',
    description: '兔肉好吃吗？',
    imageUrl: 'https://resources.ninghao.org/images/contained.jpg',
  ),
];

效果：

完

  码上加油站

  一起来加油

长按扫码关注

点“在看”你懂得