如何使小部件与 Flutter 中的屏幕一样宽？答案

【问题标题】：How to make a widget take as much width as the screen in Flutter?如何使小部件与 Flutter 中的屏幕一样宽？
【发布时间】：2019-11-21 12:17:53
【问题描述】：

在我的颤振项目中，我使用了一个 Row 水平对齐两个文本，第一个文本大小是固定的，但我希望第二个文本具有与屏幕大小一样多的宽度。

这是我的代码-

            Container(
              child: Padding(
                padding: const EdgeInsets.all(10.0),
                child: (
                  Row(
                    children: <Widget>[
                      Container(
                        width: 150,
                        color: Colors.blue,
                        child: Text("City: "),
                      ),
                      Container(

                        color: Colors.red,
                        child: Text("London"),
                      )
                    ],
                  )
                ),
              ),
            ),



            Container(
              child: Padding(
                padding: const EdgeInsets.all(10.0),
                child: (
                    Row(
                      children: <Widget>[
                        Container(
                          width: 150,
                          color: Colors.blue,
                          child: Text("Country: "),
                        ),
                        Container(

                          color: Colors.red,
                          child: Text("England "),
                        )
                      ],
                    )
                ),
              ),
            ),



            Container(
              child: Padding(
                padding: const EdgeInsets.all(10.0),
                child: (
                    Row(
                      mainAxisAlignment: MainAxisAlignment.start,
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: <Widget>[
                        Container(
                          width: 150,
                          color: Colors.blue,
                          child: Text("Address: "),
                        ),
                        Container(
                          color: Colors.red,
                          child: Text("aaaaa zzzzz wwwww qqqqqq rrrrr"),
                        )
                      ],
                    )
                ),
              ),
            ),

使用上面的代码，我得到了以下输出-

问题是图像中的黑色标记部分。

所以，我需要帮助来了解文本如何占用与屏幕尺寸一样多的宽度，其余文本将显示在下一行。

【问题讨论】：

标签： flutter dart

【解决方案1】：

文本小部件有一个名为overflow 的属性，您可以使用它来剪辑多余的字符串或放置省略号。您可以尝试不同类型的 TextOverflow，例如剪辑、省略号、淡入淡出等。至于将其放到下一行，您可以将 maxLines 属性设置为您喜欢的任何数字。

示例：

Container(
    width: MediaQuery.of(context).size.width / 2
    child: Text(
      "Hello world!!!!",
      maxLines: 2,
      overflow: TextOverflow.ellipsis
    ),
);

【讨论】：

是的，一模一样
@S.M.Asif 我已经进行了更改，看看并告诉我。
不，它也没有工作。你最好看看我的回答，它解决了我的问题

【解决方案2】：

这个问题可以通过一个名为Flexible的小部件来解决。我不得不再写几行来解决这些问题，但它非常适合问题中提到的问题。

所以，这是代码-

            Container(
              child: Padding(
                padding: const EdgeInsets.all(10.0),
                child: (
                  Row(
                    children: <Widget>[
                      Container(
                        width: 150,
                        color: Colors.blue,
                        child: Text("City: "),
                      ),
                      Container(

                        color: Colors.red,
                        child: Text("London"),
                      )
                    ],
                  )
                ),
              ),
            ),



            Container(
              child: Padding(
                padding: const EdgeInsets.all(10.0),
                child: (
                    Row(
                      children: <Widget>[
                        Container(
                          width: 150,
                          color: Colors.blue,
                          child: Text("Country: "),
                        ),
                        Container(

                          color: Colors.red,
                          child: Text("England "),
                        )
                      ],
                    )
                ),
              ),
            ),



            Container(

              child: Padding(
                padding: const EdgeInsets.all(10.0),
                child: (
                    Row(

                      mainAxisAlignment: MainAxisAlignment.start,
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: <Widget>[
                        Container(
                          width: 150,
                          color: Colors.blue,
                          child: Text("Address: "),
                        ),
                        new Flexible(
                          child: new Column(
                            crossAxisAlignment: CrossAxisAlignment.start,
                            children: <Widget>[
                              Container(

                                color: Colors.red,
                                child: Text("aaaaa zzzzz qqqqqq eeeeeeeeeeeeee "),
                              )
                            ],
                          ),
                        ),


                      ],
                    )
                ),
              ),
            ),

【讨论】：