右对齐 Flutter 中属于不同行的元素

Question

我正在 Flutter 中构建一个加密投资组合应用程序。我的主页有一个脚手架，其中有一列包含 4 行。前三行设计相似，每一行都以加密货币的标志、名称和我持有的数量开头。问题是我持有的数量，因为它可能是一个很大或很小的数字，所以值的范围很广，我似乎无法找到一种方法来对齐或右对齐这些值。我希望所有数字都与屏幕右侧对齐。

这是我的代码：

  return
    Scaffold
    (
        appBar: AppBar(
          title: Text('Portfolio'),
        ),
      backgroundColor: Colors.white,
      body: Column( children: <Widget>[
        Row(
          children: [
            Container(
              margin: EdgeInsets.all(10.0),
              child: new Image.asset(
                'lib/assets/usdt_logo.png',
                height: 60.0,
                fit: BoxFit.cover,
              ),
            ),
            Container(
              margin: EdgeInsets.all(10.0),
              child: new Text('USDT',
                style: TextStyle(fontSize: 15),
              ),
            ),
            Container(
              alignment: Alignment.topRight,
              margin: EdgeInsets.all(30.0),
              child: new Text("${data['usdt']}",
                style: TextStyle(fontSize: 25),
              ),
            ),
          ],
        ),
        Row(//ROW 2
          children: [
            Container(
              margin: EdgeInsets.all(10.0),
              child: new Image.asset(
                'lib/assets/bitcoin_logo.png',
                height: 60.0,
                fit: BoxFit.cover,
              ),
            ),
            Container(
              margin: EdgeInsets.all(10.0),
              child: new Text('Bitcoin',
                style: TextStyle(fontSize: 15),
              ),
            ),
            Container(
              margin: EdgeInsets.all(30.0),
              alignment: Alignment.topRight,
              child: new Text("${data['btc']}",
                style: TextStyle(fontSize: 25),
              ),
            ),
          ],
        ),
        Row(// ROW 3
            children: [
              Container(
                margin: EdgeInsets.all(10.0),
                child: new Image.asset(
                  'lib/assets/ethereum_logo.png',
                  height: 60.0,
                  fit: BoxFit.cover,
                ),
              ),
              Container(
                margin: EdgeInsets.all(10.0),
                child: new Text('Ethereum',
                  style: TextStyle(fontSize: 15),
                ),
              ),
              Container(
                margin: EdgeInsets.all(30.0),
                alignment: Alignment.topRight,
                child: new Text("${data['eth']}",
                  style: TextStyle(fontSize: 25),
                ),
              ),
            ]
        ),
        Row(// ROW 4
            children: [
              ElevatedButton(
                style: ElevatedButton.styleFrom(
                  primary: Colors.lightGreen, // background
                  onPrimary: Colors.white, // foreground
                ),
                onPressed: ()
                {
                  Navigator.pushNamed
                    (
                      context,
                      BuyPage.id,
                    );
                },
                child: Text('Buy'),
              ),ElevatedButton(
                style: ElevatedButton.styleFrom(
                  primary: Colors.red, // background
                  onPrimary: Colors.white, // foreground
                ),
                onPressed: () {
                  Navigator.pushNamed
                    (
                      context,
                      SellPage.id,
                  );
                },
                child: Text('Sell'),
              ),
            ]
        ),
      ],
      )
    );

这是目前的样子：

Answer 1

在您的 Row 的最后两个 Container 之间添加一个 Spacer：

Row(// ROW 3
        children: [
          Container(
            margin: EdgeInsets.all(10.0),
            child: new Image.asset(
              'lib/assets/ethereum_logo.png',
              height: 60.0,
              fit: BoxFit.cover,
            ),
          ),
          Container(
            margin: EdgeInsets.all(10.0),
            child: new Text('Ethereum',
              style: TextStyle(fontSize: 15),
            ),
          ),
          Spacer(),//Spacer here
          Container(
            margin: EdgeInsets.all(30.0),
            alignment: Alignment.topRight,
            child: new Text("${data['eth']}",
              style: TextStyle(fontSize: 25),
            ),
          ),
        ]
    ),

Answer 2

你也可以试试这个

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: [
          Row(
            children: [
              Row(
                children: [
                  Container(
                    height: 50,
                    width: 50,
                    margin: EdgeInsets.all(10.0),
                    color: Colors.red,
                  ),
                  Container(
                    margin: EdgeInsets.all(10.0),
                    child: new Text(
                      'USDT',
                      style: TextStyle(fontSize: 15),
                    ),
                  ),
                ],
              ),
              Expanded(
                child: Container(
                  margin: EdgeInsets.all(30.0),
                  child: new Text(
                    "100.0",
                    textAlign: TextAlign.end,
                    style: TextStyle(fontSize: 25),
                  ),
                ),
              )
            ],
          ),
          Row(
            children: [
              Row(
                children: [
                  Container(
                    height: 50,
                    width: 50,
                    margin: EdgeInsets.all(10.0),
                    color: Colors.green,
                  ),
                  Container(
                    margin: EdgeInsets.all(10.0),
                    child: new Text(
                      'Bitcoin',
                      style: TextStyle(fontSize: 15),
                    ),
                  ),
                ],
              ),
              Expanded(
                child: Container(
                  margin: EdgeInsets.all(30.0),
                  child: new Text(
                    "0.000000005",
                    textAlign: TextAlign.end,
                    style: TextStyle(fontSize: 25),
                  ),
                ),
              )
            ],
          ),
        ],
      ),
    );
  }
}

右对齐 Flutter 中属于不同行的元素

Right align elements in Flutter that are parts of different rows

flutter

flutter-layout

flutter-android