Flutter对齐小部件到中心，另一个在右边

Question

我正在尝试做一些应该非常简单但看不到如何完成的事情。

我需要将大文本对齐到中心，将按钮对齐到右边，因此它看起来像下面的图像：

[窗口小部件下方的代码左右对齐：

    Container(
      width: 300,
      height: 200,
      decoration: BoxDecoration(
        border: Border.all(color: Colour.darkBlue, width: 2),
        borderRadius: BorderRadius.all(Radius.elliptical(100, 60)),
      ),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          Container(),
          Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Text('Centred', style: TextStyle(fontSize: 32)),
              Text('24.6 %', style: TextStyle(fontSize: 48)),
            ],
          ),
          Container(
            margin: EdgeInsets.only(left: 10),
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                Text('BtnA', style: TextStyle(fontSize: 18)),
                Text('BtnB', style: TextStyle(fontSize: 18)),
                Text('BtnC', style: TextStyle(fontSize: 18)),
              ],
            ),
          ),
        ],
      ),
    ),

我尝试了以下方法：

    Container(
      width: 300,
      height: 200,
      decoration: BoxDecoration(
        border: Border.all(color: Colour.darkBlue, width: 2),
        borderRadius: BorderRadius.all(Radius.elliptical(100, 60)),
      ),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          Expanded(child: Container()),
          Expanded(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                Text('Centred', style: TextStyle(fontSize: 32)),
                Text('24.6 %', style: TextStyle(fontSize: 48)),
              ],
            ),
          ),
          Expanded(
            child: Container(
              margin: EdgeInsets.only(left: 10),
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  Text('BtnA', style: TextStyle(fontSize: 18)),
                  Text('BtnB', style: TextStyle(fontSize: 18)),
                  Text('BtnC', style: TextStyle(fontSize: 18)),
                ],
              ),
            ),
          ),
        ],
      ),
    ),

但是结果是这样：

不确定在不手动设置左侧容器宽度的情况下如何或是否可以完成此操作，这显然与理想方法相去甚远。 Flutter似乎非常需要float:right ...

Answer 1

尝试使用ListTile窗口小部件，我已经使用ListTile进行了更改，请检查它是否对您有用

Center(
    child: Container(
      alignment: Alignment.center,
      margin: EdgeInsets.only(top: 10),
      padding: EdgeInsets.all(15),
      width: 300,
      height: 200,
      decoration: BoxDecoration(
        border: Border.all(color: Colors.blue, width: 2),
        borderRadius: BorderRadius.all(Radius.elliptical(100, 60)),
      ),
      child: ListTile(
        title: Text('Centred', style: TextStyle(fontSize: 30)),
        subtitle: Text('24.6 %', style: TextStyle(fontSize: 48)),
        trailing: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text('BtnA', style: TextStyle(fontSize: 15)),
            Text('BtnB', style: TextStyle(fontSize: 15)),
            Text('BtnC', style: TextStyle(fontSize: 15)),
          ],
        ),
      ),
    ),
  )