如何使我的内容具有响应性并且不会溢出容器

Question

这是我的容器在模拟器 (Pixel 3) 上的样子：

现在这就是我的 Galaxy S9 上的样子：

我的专栏的文字溢出了。我以为它会自动“适应”，但似乎并非如此。

溢出的4个元素的代码是：

                          child: Row(
                            mainAxisAlignment: MainAxisAlignment.spaceBetween,
                            children: <Widget>[
                              Column(
                                crossAxisAlignment: CrossAxisAlignment.start,
                                children: <Widget>[
                                  Row(
                                    //mainAxisAlignment: MainAxisAlignment.start,
                                    children: <Widget>[
                                      Icon(
                                        Icons.turned_in_not,
                                        color: Colors.grey[700],
                                        size: 18.0,
                                      ),
                                      SizedBox(width: 7.0,),
                                      Text(
                                        'Economy',
                                        style: TextStyle(
                                          fontFamily: 'SamsungSans',
                                          fontSize: 15.0,
                                          color: Colors.grey[700],
                                          fontWeight: FontWeight.w400
                                        ),
                                      ),
                                    ],
                                  ),
                                  SizedBox(
                                    height: 15.0,
                                  ),
                                  Row(
                                    mainAxisAlignment: MainAxisAlignment.start,
                                    children: <Widget>[
                                      Icon(
                                        Icons.location_on,
                                        color: Colors.grey[700],
                                        size: 18.0,
                                      ),
                                      SizedBox(width: 7.0,),
                                      Text(
                                        'Terminal 1',
                                        style: TextStyle(
                                          fontFamily: 'SamsungSans',
                                          fontSize: 15.0,
                                          color: Colors.grey[700],
                                          fontWeight: FontWeight.w400
                                        ),
                                      ),
                                    ],
                                  ),

                                ],
                              ),
                              Column(
                                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                                crossAxisAlignment: CrossAxisAlignment.start,
                                children: <Widget>[
                                  Row(
                                    children: <Widget>[
                                      Icon(
                                        Icons.airline_seat_legroom_normal,
                                        color: Colors.grey[700],
                                        size: 18.0,
                                      ),
                                      SizedBox(width: 7.0,),
                                      Text(
                                        'Standard legroom',
                                        style: TextStyle(
                                          //fontFamily: 'SamsungSans',
                                          fontSize: 14.0,
                                          color: Colors.grey[700],
                                          fontWeight: FontWeight.w400
                                        ),
                                      ),
                                    ],
                                  ),
                                  SizedBox(
                                    height: 15.0,
                                  ),
                                  Row(
                                    children: <Widget>[
                                      Icon(
                                        Icons.card_travel,
                                        color: Colors.grey[700],
                                        size: 18.0,
                                      ),
                                      SizedBox(width: 7.0,),
                                      Text(
                                        '1 included',
                                        style: TextStyle(
                                          fontFamily: 'SamsungSans',
                                          fontSize: 15.0,
                                          color: Colors.grey[700],
                                          fontWeight: FontWeight.w400
                                        ),
                                      ),
                                    ],
                                  )
                                ],
                              )
                            ],
                          ),                          

关于我应该更改什么以使文本不会溢出其容器的任何想法？

谢谢。

Answer 1

我建议用Expanded 小部件包装你溢出的小部件。希望它会有所帮助。

UPD 我只是在一些具有 mdpi 分辨率的旧设备上使用了上面的代码。为了解决溢出问题，我在第二个Column 中添加了Expanded，它解决了溢出问题，但它的“标准腿部空间”文本仍然溢出。因此，如果字符串很长，我建议为您的文本添加overflow: TextOverflow.ellipsis。

如果您想保留整个字符串，只需将Expanded 添加到溢出的Text 小部件。但是在这种情况下会有行文本，它不可能是一个解决方案。

无论如何，这是我的最终代码：

    Row(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: <Widget>[
        Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
            Row(
              //mainAxisAlignment: MainAxisAlignment.start,
              children: <Widget>[
                Icon(
                  Icons.turned_in_not,
                  color: Colors.grey[700],
                  size: 18.0,
                ),
                SizedBox(
                  width: 7.0,
                ),
                Text(
                  'Economy',
                  style: TextStyle(
                      fontFamily: 'SamsungSans',
                      fontSize: 15.0,
                      color: Colors.grey[700],
                      fontWeight: FontWeight.w400),
                ),
              ],
            ),
            SizedBox(
              height: 15.0,
            ),
            Row(
              mainAxisAlignment: MainAxisAlignment.start,
              children: <Widget>[
                Icon(
                  Icons.location_on,
                  color: Colors.grey[700],
                  size: 18.0,
                ),
                SizedBox(
                  width: 7.0,
                ),
                Text(
                  'Terminal 1',
                  style: TextStyle(
                      fontFamily: 'SamsungSans',
                      fontSize: 15.0,
                      color: Colors.grey[700],
                      fontWeight: FontWeight.w400),
                ),
              ],
            ),
          ],
        ),
        Expanded(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            crossAxisAlignment: CrossAxisAlignment.start,
            children: <Widget>[
              Row(
                children: <Widget>[
                  Icon(
                    Icons.airline_seat_legroom_normal,
                    color: Colors.grey[700],
                    size: 18.0,
                  ),
                  SizedBox(
                    width: 7.0,
                  ),
                  Expanded(
                    child: Text(
                      'Standard legroom',
                      overflow: TextOverflow.ellipsis,
                      style: TextStyle(
                          //fontFamily: 'SamsungSans',
                          fontSize: 14.0,
                          color: Colors.grey[700],
                          fontWeight: FontWeight.w400),
                    ),
                  ),
                ],
              ),
              SizedBox(
                height: 15.0,
              ),
              Row(
                children: <Widget>[
                  Icon(
                    Icons.card_travel,
                    color: Colors.grey[700],
                    size: 18.0,
                  ),
                  SizedBox(
                    width: 7.0,
                  ),
                  Text(
                    '1 included',
                    style: TextStyle(
                        fontFamily: 'SamsungSans',
                        fontSize: 15.0,
                        color: Colors.grey[700],
                        fontWeight: FontWeight.w400),
                  ),
                ],
              )
            ],
          ),
        )
      ],
    );

]2