【问题标题】:How to set align right in table with Flutter如何使用 Flutter 在表格中设置右对齐
【发布时间】:2020-01-20 08:35:56
【问题描述】:

我正在使用颤振表。 我想设置数字对齐。(或居中)

我怎样才能让他们找到?

我想标题中心。数字向右。

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

代码太多,那我就写了一些代码。 请看一下。

【问题讨论】:

  • 请分享您的代码吗?
  • 我贴了一部分代码。
  • 您没有共享包含数字的代码。这是您要对齐的数字。

标签: flutter dart flutter-table


【解决方案1】:

Container 内有alignment: Alignment.center

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

【讨论】:

    【解决方案2】:

    这是一个示例,也是您代码的一部分! 表孩子:

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

    【讨论】:

      【解决方案3】:

      试试这个:

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

      【讨论】:

        【解决方案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`
          }
        

        【讨论】:

          猜你喜欢
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          • 2012-08-19
          • 1970-01-01
          • 2011-03-28
          • 2012-12-09
          • 1970-01-01
          • 1970-01-01
          相关资源
          最近更新 更多