Question

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

这是我的代码-

            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"),
                        )
                      ],
                    )
                ),
              ),
            ),

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

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

因此，我需要帮助来了解文本的宽度与屏幕大小一样大，其余文本将在下一行显示。

Answer 1

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

示例：

overflow

Answer 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 "),
                              )
                            ],
                          ),
                        ),


                      ],
                    )
                ),
              ),
            ),

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

2 个答案: