2

I'm using flutter table. I would like to set numbers align right.(or center)

How can I make them locate?

I would like to header center. numbers to right.

enter image description here

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

Too much code, then I wrote some of codes. Please take a look.

4

4 回答 4

4

有alignment: Alignment.center里面Container，

Container(
         alignment: Alignment.center,
         padding: EdgeInsets.all(2.0),
         child: Text('G',
         style: TextStyle(fontWeight: FontWeight.bold)),
         ),
于 2020-01-20T08:51:12.207 回答
0

这是一个示例，也是您代码的一部分！表孩子：

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

图片

于 2020-01-20T08:57:03.630 回答
-1

尝试这个：

Container(
    padding: EdgeInsets.all(2.0),
    child: Align(
        alignment: Alignment.center,
        Text('G',
            style: TextStyle(fontWeight: FontWeight.bold)),
    ),
),
于 2020-01-20T08:50:39.143 回答
-1

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`
  }
于 2020-04-15T08:54:33.820 回答