简体   繁体   English

如何在 Flutter 中将小部件与动态居中小部件的右侧对齐?

[英]How to align a widget to the right of a dynamic centered widget in Flutter?

I have a text widget in the center that has a dynamic width.我在中心有一个具有动态宽度的文本小部件。 However, I want to add in a widget to the right of this text widget.但是,我想在这个文本小部件的右侧添加一个小部件。

Because this center text wiget has a dynamic width, I cannot use absolute positioning widgets such as Align or the Position Widget.因为这个中心文本小部件具有动态宽度,所以我不能使用绝对定位小部件,例如 Align 或 Position 小部件。 I am looking for something similar to RelativeLayout in Android.我正在寻找类似于 Android 中的 RelativeLayout 的东西。

在此处输入图像描述

  Widget body() {
    return Container(
      child: Row(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          Text('Center text'),
          FlatButton(
            child: Text('next'),
            onPressed: () {},
          ),
        ],
      ),
    );
  }

With @Igors method I can end with a center widget with a button on each end evenly spaced.使用@Igors 方法,我可以以一个中心小部件结束,每端都有一个均匀分布的按钮。 I am aiming for the button to be to the right of.我的目标是按钮位于右侧。

  Widget body() {
    return Container(
      child: Row(
        children: <Widget>[
          Expanded(
            child: FlatButton(
              child: Text('next'),
              onPressed: () {},
            ),
          ),
          Container(color: Colors.red, child: Text('test')),
          Expanded(
            child: FlatButton(
              child: Text('next'),
              onPressed: () {},
            ),
          ),
        ],
      ),
    );
  }

Edit: Solved through the use of Sized Box on each side of the centered widget 1.编辑:通过在居中小部件 1 的每一侧使用大小框来解决。

Row(
  children: <Widget>[
    Expanded(
      child: Container(
        color: Colors.green
      ),
    ),
    Container(
      color: Colors.red,
      child: Text('test')
    ),
    Expanded(
      child: Container(
        color: Colors.blue
      ),
    ),
  ],
)

Use the Widget Row and add the text widget in a Container Widget.使用小部件行并将文本小部件添加到容器小部件中。

And add margin for the Container并为容器添加边距

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM