如何使用 Flutter 在 table 中设置右对齐

Question

我正在使用 flutter table。我想设置数字右对齐（或居中）

我怎样才能让他们定位？

我想要页眉居中。数字向右。

             Container(
                margin: EdgeInsets.all(8.0),
                width: double.infinity,
                decoration: BoxDecoration(border: Border.all(width: 1.0)),
                child: Table(
                  columnWidths: {
                    0: FlexColumnWidth(1),
                    1: FlexColumnWidth(1),
                    2: FlexColumnWidth(4),
                    3: FlexColumnWidth(1),
                    4: FlexColumnWidth(1),
                    5: FlexColumnWidth(1),
                    6: FlexColumnWidth(1),
                  },
                  border: TableBorder.all(),
                  defaultVerticalAlignment: TableCellVerticalAlignment.middle,
                  children: <TableRow>[
                    TableRow(children: <Widget>[
                      Container(
                        padding: EdgeInsets.all(2.0),
                        child: Text('G',
                            style: TextStyle(fontWeight: FontWeight.bold)),
                      ),
                      Container(
                        padding: EdgeInsets.all(2.0),
                        child: Text('A',
                            style: TextStyle(fontWeight: FontWeight.bold)),
                      ),
                    ]
                  ),

        TableRow(children: <Widget>[
          Container(
            padding: EdgeInsets.all(2.0),
            child: Text('2'),
          ),
          Container(
            padding: EdgeInsets.all(2.0),
            child: Text('FW'),
          ),
          ]
        )

代码太多了，我写了一些代码。请看一下。

Answer 1

试试这个：

Container(
    padding: EdgeInsets.all(2.0),
    child: Align(
        alignment: Alignment.center,
        Text('G',
            style: TextStyle(fontWeight: FontWeight.bold)),
    ),
),

Answer 2

alignment: Alignment.center里面有Container,

Container(
         alignment: Alignment.center,
         padding: EdgeInsets.all(2.0),
         child: Text('G',
         style: TextStyle(fontWeight: FontWeight.bold)),
         ),

Answer 3

这是一个示例，也是您代码的一部分！ Table children:

children: <TableRow>[
                  TableRow(
                    children: <Widget>[
                    Container(
                      padding: EdgeInsets.all(2.0),
                      child: Text('G',
                          style: TextStyle(fontWeight: FontWeight.bold),
                                 textAlign:TextAlign.center),
                    ),
                    Container(
                      padding: EdgeInsets.all(2.0),
                      child: Text('A',
                          style: TextStyle(fontWeight: FontWeight.bold),
                                 textAlign:TextAlign.center),
                    ),
                    Container(
                      padding: EdgeInsets.all(2.0),
                      child: Text('P',
                          style: TextStyle(fontWeight: FontWeight.bold),
                                 textAlign:TextAlign.center),
                    ),
                    Container(
                      padding: EdgeInsets.all(2.0),
                      child: Text('P',
                          style: TextStyle(fontWeight: FontWeight.bold),
                                 textAlign:TextAlign.center),
                    ),
                  ]),
                  TableRow(
                    children: <Widget>[
                    Container(
                      padding: EdgeInsets.all(2.0),
                      child: Text('1',
                          style: TextStyle(fontWeight: FontWeight.bold),
                                 textAlign:TextAlign.end),
                    ),
                    Container(
                      padding: EdgeInsets.all(2.0),
                      child: Text('2',
                          style: TextStyle(fontWeight: FontWeight.bold),
                                 textAlign:TextAlign.end),
                    ),
                    Container(
                      padding: EdgeInsets.all(2.0),
                      child: Text('3',
                          style: TextStyle(fontWeight: FontWeight.bold),
                                 textAlign:TextAlign.end),
                    ),
                    Container(
                      padding: EdgeInsets.all(2.0),
                      child: Text('4',
                          style: TextStyle(fontWeight: FontWeight.bold),
                                 textAlign:TextAlign.end),
                    ),
                  ]),
                  TableRow(
                    children: <Widget>[
                    Container(
                      padding: EdgeInsets.all(2.0),
                      child: Text('1',
                          style: TextStyle(fontWeight: FontWeight.bold),
                                 textAlign:TextAlign.end),
                    ),
                    Container(
                      padding: EdgeInsets.all(2.0),
                      child: Text('2',
                          style: TextStyle(fontWeight: FontWeight.bold),
                                 textAlign:TextAlign.end),
                    ),
                    Container(
                      padding: EdgeInsets.all(2.0),
                      child: Text('3',
                          style: TextStyle(fontWeight: FontWeight.bold),
                                 textAlign:TextAlign.end),
                    ),
                    Container(
                      padding: EdgeInsets.all(2.0),
                      child: Text('4',
                          style: TextStyle(fontWeight: FontWeight.bold),
                                 textAlign:TextAlign.end),
                    ),
                  ]),
                ])

Answer 4

Flutter Table 具有最少的功能，例如填充、文本对齐、交替行颜色

@override
  Widget build(BuildContext context) {[enter image description here][1]
    return Scaffold(
        appBar: AppBar(
          title: Text("Farmers Bills"),
          backgroundColor: Colors.blue,
        ),
        body: SafeArea(
            child: Scrollbar(
          child: ListView(children: <Widget>[
            Table(
              columnWidths: {
                0: FractionColumnWidth(.3),
                1: FractionColumnWidth(.3),
                2: FractionColumnWidth(.3)
              },
              defaultVerticalAlignment: TableCellVerticalAlignment.middle,
              border: TableBorder.all(width: 1.0, color: Colors.grey),
              children: renderTableRows(listOfBills),
            ),
          ]),
        )));
  }

  renderTableRows(listOfBills) {
    List<TableRow> rows = new List<TableRow>();
    rows.add(TableRow(children: [
      Column(children: [
        Container(
            decoration: BoxDecoration(color: Colors.blue),
            padding: EdgeInsets.fromLTRB(6.0, 0.0, 0.0, 0.0),
            alignment: Alignment.center,
            child: Text("Bill Date",
                style: TextStyle(
                  fontSize: 21,
                  fontWeight: FontWeight.bold,
                  color: Colors.white,
                )))
      ]),

      Column(children: [
        Container(
            decoration: BoxDecoration(color: Colors.blue),
            padding: EdgeInsets.fromLTRB(6.0, 0.0, 0.0, 0.0),
            alignment: Alignment.center,
            child: Text("Bill No",
                style: TextStyle(
                  fontSize: 21,
                  fontWeight: FontWeight.bold,
                  color: Colors.white,
                )))
      ]),
      Column(children: [
        Container(
            decoration: BoxDecoration(color: Colors.blue),
            padding: EdgeInsets.fromLTRB(6.0, 0.0, 0.0, 0.0),
            alignment: Alignment.center,
            child: Text("Amount",
                style: TextStyle(
                  fontSize: 21,
                  fontWeight: FontWeight.bold,
                  color: Colors.white,
                )))
      ]),
      // you can have more properties of course
    ]));

    int count = 2;
    Color bgColor;
    listOfBills.forEach((item) => {
      bgColor = (count % 2 == 0) ? Colors.white : Color.fromRGBO(204,229,255, 1.0),
      count++,
      rows.add(TableRow(children: [
        Column(children: [
          Container(
              decoration: BoxDecoration(color: bgColor),
              padding: EdgeInsets.fromLTRB(6.0, 0.0, 0.0, 0.0),
              alignment: Alignment.centerLeft,
              child: Text(item['billdate'],
                  style: TextStyle(
                    fontSize: 18,
                  )))
        ]),
        Column(children: [
          Container(
              decoration: BoxDecoration(color: bgColor),
              padding: EdgeInsets.fromLTRB(6.0, 0.0, 0.0, 0.0),
              alignment: Alignment.centerLeft,
              child: Text(item['billno'],
                  style: TextStyle(
                    fontSize: 18,
                  )))
        ]),
        Column(children: [
          Container(
              decoration: BoxDecoration(color: bgColor),
              padding: EdgeInsets.fromLTRB(6.0, 0.0, 0.0, 0.0),
              alignment: Alignment.centerLeft,
              child: Text(item['amount'],
                  style: TextStyle(
                    fontSize: 18,
                  )))
        ]),
        // you can have more properties of course
      ]))
    });
    return rows;`enter code here`
  }

如何使用 Flutter 在 table 中设置右对齐

How to set align right in table with Flutter

dart

flutter

flutter-table