Flutter, jak ukazují data v tabulce s vlastní design

0

Otázka

Chci mít tabulku jako je tato:

enter image description here

Nejprve jsem se snažil, aby to na mé vlastní, ale já startet, aby se problémy s Postojem titulky... můžu upravit je s Flexibilní Widget, ale když velikost obrazovky je změnit postoje nejsou správné.

Pak jsem si přečetl o DataTable Widget... to by bylo perfektní, protože jsem se také chtějí, aby data v budoucnosti, ale nemohl jsem najít způsob, jak přidat design, jako je tento, aby řádky. Existuje způsob, nemohl jsem najít nebo používám špatný Widget? Je lepší pro tento příklad?

datatable flutter user-interface
2021-11-23 18:38:49
1

Nejlepší odpověď

0

Našel jsem způsob, jak s 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(),
      ),
    );
  }
}
2021-12-02 18:35:09

V jiných jazycích

Tato stránka je v jiných jazycích

Русский
..................................................................................................................
Italiano
..................................................................................................................
Polski
..................................................................................................................
Română
..................................................................................................................
한국어
..................................................................................................................
हिन्दी
..................................................................................................................
Français
..................................................................................................................
Türk
..................................................................................................................
Português
..................................................................................................................
ไทย
..................................................................................................................
中文
..................................................................................................................
Español
..................................................................................................................
Slovenský
..................................................................................................................