dart 如何使用Flutter设置表格中的右对齐

3zwtqj6y 于 2023-05-04 发布在 Flutter

关注(0)|答案(5)|浏览(116)

我用的是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'),
          ),
          ]
        )

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

dart

来源：https://stackoverflow.com/questions/59819494/how-to-set-align-right-in-table-with-flutter

5条答案

按热度按时间

fquxozlt1#

在Container内部有alignment: Alignment.center，

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

赞(0）回复(0）举报 2023-05-04

1tuwyuhd2#

这是一个例子，也是你代码的一部分！表子项：

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),
                    ),
                  ]),
                ])

赞(0）回复(0）举报 2023-05-04

cngwdvgl3#

放置数值属性：

DataColumn(
      numeric: true,

赞(0）回复(0）举报 2023-05-04

idv4meu84#

试试这个：

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

赞(0）回复(0）举报 2023-05-04

gz5pxeao5#

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`
  }

赞(0）回复(0）举报 2023-05-04

我来回答

dart 如何使用Flutter设置表格中的右对齐

5条答案

相关问题

热门标签

最新问答