在颤振行/列中独立对齐元素答案

【问题标题】：Align element independent in flutter Row/Column在颤振行/列中独立对齐元素
【发布时间】：2020-08-18 02:08:58
【问题描述】：

我是 Flutter 的新手，最近我遇到了一个场景，我必须不雅地对齐行中的元素。我有 3 个子元素，我们称之为 A、B 和 C。我的要求是 A 和 B 位于行的最左侧，元素 C 位于最右侧。

预期：

我的代码：

Row(
            mainAxisSize: MainAxisSize.max,
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: <Widget>[
              CircleAvatar(
                backgroundImage: NetworkImage(''),
                radius: 30,
              ),
              SizedBox(
                width: 10,
              ),
              Flexible(
                child: Text('name', overflow: TextOverflow.ellipsis,),
              ),
              SizedBox(
                width: 10,
              ),
              Container(
                child: ButtonTheme(
                  height: 25.0,
                  shape: RoundedRectangleBorder(
                      borderRadius: BorderRadius.circular(100.0)),
                  child: RaisedButton(
                    child: Text(
                      'Challenge',
                      style: TextStyle(color: Colors.white, fontSize: 12),
                    ),
                    onPressed: () {},
                  ),
                ),
              ),
            ],
          ),

但是输出是这样的：

当我尝试使用 Spacer() 时，输出如下：

任何人都可以帮我解决这个问题。提前致谢。

【问题讨论】：

标签： flutter flutter-layout

【解决方案1】：

您必须将Text 小部件包装在Expanded 小部件中，如下例所示。试试这个，效果很好检查以下代码：


 Row(
              mainAxisSize: MainAxisSize.max,
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: <Widget>[
                CircleAvatar(
                  backgroundImage: NetworkImage(''),
                  radius: 30,
                ),
                SizedBox(
                  width: 10,
                ),
                Expanded(
                 // wrap your text widget with an Expanded widget
                  child: Text(
                    'name',
                    overflow: TextOverflow.ellipsis,
                    textAlign: TextAlign.start,
                  ),
                ),
                SizedBox(
                  width: 10,
                ),
                Container(
                  child: ButtonTheme(
                    height: 25.0,
                    shape: RoundedRectangleBorder(
                        borderRadius: BorderRadius.circular(100.0)),
                    child: RaisedButton(
                      child: Text(
                        'Challenge',
                        style: TextStyle(color: Colors.white, fontSize: 12),
                      ),
                      onPressed: () {},
                    ),
                  ),
                ),
              ],
            ),

希望对你有帮助。

【讨论】：

不客气。对你有帮助别忘了点赞哦！

【解决方案2】：

使用 Expanded 小部件包装您的文本，并将您的文本小部件的 textAlign 设置为 TextAlign.start，如下面的代码：

 Row(
              mainAxisSize: MainAxisSize.max,
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: <Widget>[
                CircleAvatar(
                  backgroundImage: NetworkImage(''),
                  radius: 30,
                ),
                SizedBox(
                  width: 10,
                ),
                Expanded(
                  child: Text(
                    'name',
                    overflow: TextOverflow.ellipsis,
                    textAlign: TextAlign.start,
                  ),
                ),
                SizedBox(
                  width: 10,
                ),
                Container(
                  child: ButtonTheme(
                    height: 25.0,
                    shape: RoundedRectangleBorder(
                        borderRadius: BorderRadius.circular(100.0)),
                    child: RaisedButton(
                      child: Text(
                        'Challenge',
                        style: TextStyle(color: Colors.white, fontSize: 12),
                      ),
                      onPressed: () {},
                    ),
                  ),
                ),
              ],
            ),

【讨论】：

【解决方案3】：

试试这个，它应该适合你。

Row(
  mainAxisSize: MainAxisSize.min,
  children: <Widget>[
      CircleAvatar(
         backgroundImage: NetworkImage(''),
         radius: 30,
      ),
      SizedBox(width: 10),
      Expanded(
        child: Text('name', align: TextAlign.start, overflow: TextOverflow.ellipsis),
      ),
      SizedBox(width: 10),
      Container(
        child: ButtonTheme(
           height: 25.0,
           shape: RoundedRectangleBorder(
               borderRadius: BorderRadius.circular(100.0)),
               child: RaisedButton(
                  child: Text('Challenge', style: TextStyle(color: Colors.white, fontSize: 12)),
                  onPressed: () {},
               )
           )
        )
  ]
)

【讨论】：

谢谢哥们，看来Expanded的伎俩对我有用。
告诉你，它对你有用。 :D。乐于助人:)