Table 小部件未显示

Question

我想创建一个有 2 列的 table，两列颜色不同，这是我试过的代码，代码编译和运行没有任何错误，但它没有显示任何 table 或单元格。

import 'package:flutter/material.dart';

class Cell extends StatefulWidget {
  const Cell({Key? key}) : super(key: key);[output from the above code][1]

  @override
  _CellState createState() => _CellState();
}

class _CellState extends State<Cell> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      //backgroundColor: Colors.deepOrangeAccent,
      appBar: AppBar(
        title: Text("Order History"),
      ),
      body: Container(
        width: MediaQuery.of(context).size.width,
        margin: EdgeInsets.all(10.0),
        child: Table(
          columnWidths: {
            0: FlexColumnWidth(5.0),
            1: FlexColumnWidth(3.0),
          },
          defaultVerticalAlignment: TableCellVerticalAlignment.middle,
          border: TableBorder.all(width: 2.0, color: Colors.black),
          //defaultColumnWidth: FixedColumnWidth(100.0),
          children: [
            TableRow(children: [
              Cell1(text: "test1", color: Colors.grey),
              Cell1(text: "test11", color: Colors.blue),
            ]),
            TableRow(children: [
              Cell1(text: "test2", color: Colors.grey),
              Cell1(text: "test22", color: Colors.blue),
            ]),
            TableRow(children: [
              Cell1(text: "test3", color: Colors.grey),
              Cell1(text: "test33", color: Colors.blue),
            ]),
            TableRow(children: [
              Cell1(text: "test4", color: Colors.grey),
              Cell1(text: "test44", color: Colors.blue),
            ]),
            TableRow(children: [
              Cell1(text: "test5", color: Colors.grey),
              Cell1(text: "test55", color: Colors.blue),
            ]),
          ],
        ),
      ),
    );
  }
}

class Cell1 extends StatelessWidget {
  final String text;
  final Color color;

  Cell1({required this.text, required this.color, Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return TableCell(
      verticalAlignment: TableCellVerticalAlignment.fill,
      child: Container(
        color: color,
        alignment: Alignment.center,
        child: Text(text,
            style: TextStyle(fontSize: 10), textAlign: TextAlign.center),
      ),
    );
  }
}

我想创建一个包含 2 列且两列颜色不同的 table

Output from the above code

this is my expected output

Answer 1

从 TableCell

中删除 verticalAlignment

////

Container(
        width: MediaQuery.of(context).size.width,
        margin: EdgeInsets.all(10.0),
        child: Table(
          columnWidths: {
            0: FlexColumnWidth(5.0),
            1: FlexColumnWidth(3.0),
          },
          defaultVerticalAlignment: TableCellVerticalAlignment.middle,
          border: TableBorder.all(width: 2.0, color: Colors.white),
          //defaultColumnWidth: FixedColumnWidth(100.0),
          children: [
            TableRow(children: [
              Cell1(text: "test1", color: Colors.grey),
              Cell1(text: "test11", color: Colors.blue, isValued: true),
            ]),
            TableRow(children: [
              Cell1(text: "test2", color: Colors.grey),
              Cell1(text: "test22", color: Colors.blue, isValued: true),
            ]),
            TableRow(children: [
              Cell1(text: "test3", color: Colors.grey),
              Cell1(text: "test33", color: Colors.blue, isValued: true),
            ]),
            TableRow(children: [
              Cell1(text: "test4", color: Colors.grey),
              Cell1(text: "test44", color: Colors.blue, isValued: true),
            ]),
            TableRow(children: [
              Cell1(text: "test5", color: Colors.grey),
              Cell1(text: "test55", color: Colors.blue, isValued: true),
            ]),
          ],
        ),
      )

////

class Cell1 extends StatelessWidget {
  final String text;
  final Color color;
  final bool isValued;

  Cell1({required this.text, required this.color, this.isValued = false});

  @override
  Widget build(BuildContext context) {
    return TableCell(
      child: Container(
        color: color,
        alignment: Alignment.center,
        padding: EdgeInsets.all(10),
        child: Text(text,
            textAlign: TextAlign.center,
            style: TextStyle(
                fontSize: 14, color: isValued ? Colors.white : Colors.black)),
      ),
    );
  }
}

Table 小部件未显示

Table widget not showing

dart

flutter

flutter-table