Flutter 将小部件对齐到中心，另一个对齐到右侧 - 不可能答案

【问题标题】：Flutter align widget to centre and another to the right - impossibleFlutter 将小部件对齐到中心，另一个对齐到右侧 - 不可能
【发布时间】：2019-09-30 09:14:53
【问题描述】：

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

我需要将大文本居中对齐，按钮向右对齐，如下图所示：

使用下面的代码，小部件左右对齐：

    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...

【问题讨论】：

你试过在左侧（空）和右侧使用SizedBox 吗？都设置width和扩大中间Column，或者尝试将flex因子设置为official's youtube tutorial
@Tokenyet 这不是和我已经尝试过的一样吗？第二段代码。
@Tokenyet 主要问题是如何将大文本实际居中，使其真正居中。似乎是颤振挣扎的东西。它太依赖于它周围所有其他元素的位置，所以这里只有一个元素在右边，它不知道如何居中。

标签： flutter dart alignment

【解决方案1】：

你快到了。应该去掉中间的“Expanded”：

    Container(
      width: 300,
      height: 200,
      decoration: BoxDecoration(
        border: Border.all(color: Colors.blueAccent, width: 2),
        borderRadius: BorderRadius.all(Radius.elliptical(100, 60)),
      ),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          Expanded(child: Container()),
          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)),
                ],
              ),
            ),
          ),
        ],
      ),
    ),

【讨论】：

【解决方案2】：

尝试使用 ListTile Widget，我已经使用 ListTile 进行了更改，请检查它是否适合您

 Center(
    child: Container(
      alignment: Alignment.center,
      margin: EdgeInsets.only(top: 10),
      padding: EdgeInsets.all(15),
      width: 300,
      height: 150,
      decoration: BoxDecoration(
        border: Border.all(color: Colors.blue, width: 2),
        borderRadius: BorderRadius.all(Radius.elliptical(100, 60)),
      ),
      child: ListTile(
        title: Text('Centred',
            textAlign: TextAlign.center, style: TextStyle(fontSize: 30)),
        subtitle: Text('24.6 %',
            textAlign: TextAlign.center, 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)),
          ],
        ),
      ),
    ),
  )

【讨论】：

很好的答案兄弟！
根本不起作用。你为什么不先检查一下？大文本在左边，ListTile 在右边。
即使你的图像显示它不起作用...？？椭圆中间的大文字怎么样？？
这看起来像我问题中的第一张图片？？
为什么有效？它仍然不在图像的中心。

【解决方案3】：

    child: Center(
          child: Container(
            width: 300,
            height: 150,
            decoration: BoxDecoration(
              border: Border.all(color: Colors.red, width: 2),
              borderRadius: BorderRadius.all(Radius.elliptical(100, 60)),
            ),
            child: Container(
              child: Stack(
                children: <Widget>[
                  Center(
                    child: Container(
                      child: Column(
                        mainAxisAlignment: MainAxisAlignment.center,
                        children: <Widget>[
                          Flexible(
                            child: Text('Centred',
                                style: TextStyle(fontSize: 32)),
                          ),
                          Flexible(
                            child: Text('24.6 %',
                                style: TextStyle(fontSize: 48)),
                          ),
                        ],
                      ),
                    ),
                  ),
                  Align(
                    alignment: Alignment.centerRight,
                    child: Container(
                      margin: const EdgeInsets.only(right: 16.0),
                      child: Column(
                        mainAxisAlignment: MainAxisAlignment.center,
                        crossAxisAlignment: CrossAxisAlignment.center,
                        children: <Widget>[
                          Text('BtnA', style: TextStyle(fontSize: 15)),
                          Text('BtnB', style: TextStyle(fontSize: 15)),
                          Text('BtnC', style: TextStyle(fontSize: 15)),
                        ],
                      ),
                    ),
                  )
                ],
              ),
            ),
          ),
        ),

【讨论】：

是的可能不清楚，说明你真正想要的中心是什么？
请删除您的答案。大文本甚至被称为“中心”！我不明白你怎么不知道哪些文本需要居中......
@Hasen 你检查了吗？