Flutter 如何使用自己的设计在 table 中显示数据

Question

我想要一个这样的table：

首先我尝试自己制作，但我开始遇到标题位置的问题...我可以使用 Flexible Widget 调整它们，但是当屏幕尺寸改变时，位置不正确没有了。

然后我阅读了有关 DataTable Widget 的信息...这将是完美的，因为我也想在将来对数据进行排序...但是我找不到将这样的设计添加到行中的方法。有没有办法我找不到或者我使用了错误的小部件？这个例子有更好的例子吗？

Answer 1

我找到了一种使用 DataTable 的方法：

class ObjectDataTable extends StatelessWidget {
  final List<String> columnNames;
  final List<List<Widget>> rowData;
  final BoxConstraints constraint;
  const ObjectDataTable(
      {Key? key,
      required this.constraint,
      required this.rowData,
      required this.columnNames})
      : super(key: key);

  @override
  Widget build(BuildContext context) {
    double width = constraint.maxWidth-50;
    return Theme(
      data: Theme.of(context).copyWith(dividerColor: Colors.transparent),
      child: DataTable(
          dataRowHeight: 100,
          columnSpacing: 0,
          dividerThickness: 0,
          columns: List<DataColumn>.generate(
            columnNames.length,
            (int index,) => DataColumn(
              label: CustomCell(
                isHeader: true,
                width: width,
                columnCnt: columnNames.length,
                start: (index == 0),
                end: (index == columnNames.length - 1),
                child: Text(
                  columnNames[index],
                  textAlign: TextAlign.center,
                ),
                color: AppColors().objectListHeader,
              ),
              numeric: false,
            ),
          ),
          rows: List<DataRow>.generate(
            rowData.length, (int index1,) => DataRow(
              cells: List<DataCell>.generate(
                rowData[index1].length, (int index,) => DataCell(
                CustomCell(
                  width: width,
                  columnCnt: rowData[index1].length,
                  start: (index == 0),
                  end: (index == rowData[index1].length - 1),
                  child:
                  rowData[index1][index],
                ),
              ),
              ),
            ),
          ),
      ),
    );
  }
}

class CustomCell extends StatelessWidget {
  final double width;
  final bool start;
  final bool end;
  final Widget? child;
  final int columnCnt;
  final Color? color;
  final bool isHeader;

  const CustomCell(
      {Key? key,
      this.isHeader=false,  
      required this.width,
      required this.columnCnt,
      this.color,
      this.child,
      this.start = false,
      this.end = false})
      : super(key: key);

  BorderRadius getBorderRadius() {
    BorderRadius borderRadius = BorderRadius.zero;
    if (!(start && end)) {
      if (start) {
        borderRadius = BorderRadius.only(
            bottomLeft: Radius.circular(10), topLeft: Radius.circular(10));
      } else if (end) {
        borderRadius = BorderRadius.only(
            bottomRight: Radius.circular(10), topRight: Radius.circular(10));
      }
    }
    return borderRadius;
  }

  Color getColor() {
    Color myColor = AppColors().objectRow;
    if (color != null) {
      myColor = color!;
    }
    return myColor;
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Center(
          child: child),
      height: isHeader?40:70,
      width: width / columnCnt,
      decoration: BoxDecoration(
        color: getColor(),
        borderRadius: getBorderRadius(),
      ),
    );
  }
}

Flutter 如何使用自己的设计在 table 中显示数据

Flutter how to show data in a table with own design

datatable

user-interface

flutter