如何在 flutter 的一行 2 个元素中仅居中一个元素

Question

在我的布局中，我有两个连续的小部件，一个文本和一个图标。

如下图，假设*指的是图标，用“-”表示行：

----------------------------
           Text          *  
----------------------------

如何使我的文本在整行中居中，图标在右端？

Answer 1

您需要注意的主要事情是，如果您不想使用 Stack，您应该在左侧和右侧提供相同的宽度消耗小部件。

我会用 Expanded 和 Padding

Row(
  children: <Widget>[
    Expanded(
      child: Padding(
        padding: const EdgeInsets.only(left: 32.0),
        child: Text(
          "Text",
          textAlign: TextAlign.center,
        ),
      ),
    ),
    Icon(Icons.add, size: 32.0,)
  ],
)

或 Row 的 mainAxisAlignment 和 SizedBox

Row(
  mainAxisAlignment: MainAxisAlignment.spaceBetween,
  children: <Widget>[
    const SizedBox(width: 32.0),
    Text("Text"),
    Icon(Icons.add, size: 32.0)
  ],
)

或在左侧使用 Expanded 和 SizedBox 而不是填充 :)。左侧的填充或额外容器是为了使 textAlign 真正将行中的文本居中，同时考虑到图标占用的 space。

Answer 2

只需在 left/right 侧使用 Expanded 和 Spacer 小部件并将您的小部件放入 Expanded:

Row(
  mainAxisAlignment: MainAxisAlignment.center,
  children: <Widget>[
    Spacer(),
    Text('Text'),
    Expanded(
      child: Text('*'),
      ),
    ),
  ],
),

结果：

Answer 3

1.使用 Row（虽然不是很灵活）

Row(
  children: <Widget>[
    Expanded(child: Center(child: Text('Center'))),
    Text("#"),
  ],
)

2。使用 Stack（灵活）

IntrinsicHeight(
  child: Stack(
    children: [
      Align(child: Text('Center')),
      Positioned(right: 0, child: Text('#')),
    ],
  ),
)

Answer 4

我发现有必要使用 Stack 让文本真正居中：

Column(
  mainAxisSize: MainAxisSize.min,
  crossAxisAlignment: CrossAxisAlignment.stretch,
  children: [
    Stack(
      alignment: Alignment.center,
      children: [
        Align(
          alignment: Alignment.center,
          child: Text('Text'),
        ),
        Align(
          alignment: Alignment.centerRight,
          child: Text('*'),
        )
      ],
    ),
  ],
);

Answer 5

在没有 Stack 的情况下这对我有用。但情况恰恰相反。 “文本”向左“*”向中间：

Row(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        Expanded(
          child: Text("text",
              style: Theme.of(context).textTheme.caption),
        ),
        Text("*"),
        Spacer(),
      ],
    )

Answer 6

就我而言，我通过调整 Spacer 小部件的 flex 属性解决了居中问题 -

Row(children: [
        Spacer(flex: 3),//3 was for my case, It might be changed for your widgets
        Text('Center'),
        Spacer(flex: 1),//1 was also for my case, It might be changed on for your widgets
        Text("*")]);

Answer 7

在开始处添加另一个图标并将不透明度设置为零。

Row(
   mainAxisAlignment: MainAxisAlignment.spaceBetween,
   children: [
      CloseButton(
         onPressed: () => Navigator.of(context).pop(),
      ),
      Text('text',),

      Opacity(
         opacity: 0,
         child: Icon(Icons.close),
         ),
       ],
     )

Answer 8

出于灵活性原因，我建议使用扩展小部件：

       Row(
            children: [
              Expanded(flex: 1, child: Container()),
              Expanded(
                flex: 8,
                child: Text('Your Text',
                  textAlign: TextAlign.center,
                ),
              ),
              Expanded(flex: 1, child: IconButton(...))
            ],
          )

如何在 flutter 的一行 2 个元素中仅居中一个元素

How to center only one element in a row of 2 elements in flutter

flutter

flutter-layout