文字在行中溢出，飘动

Question

由于文本太长，我在布局上遇到了问题，我尝试使用Expanded / Flexible来处理文本，这会导致问题填补它所需要的空间，但是它已经溢出了。我知道这个问题被问了上百次，但我不明白哪里有错误。我试着同时向所有的行/列申请Expanded / Flexible (主要是为了修复它而尝试布局)，我仍然有这个问题……我甚至尝试将FittedBox与fit: BoxFit.(all of them)结合使用。

​

​

Container(
          alignment: Alignment.centerLeft,
          child: Column(
            children: [
              Row(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Padding(
                    padding: const EdgeInsets.only(right: 8.0),
                    child: Icon(Icons.directions_car),
                  ),
                  Row(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          Text("Text 1"),
                          SizedBox(
                            height: 4,
                          ),
                          Text('TEXT 2'),
                        ],
                      ),
                      SizedBox(
                        width: 27,
                      ),
                      Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          Text('1 World Way, Los Angeles, CA 90045, USA',
                            textAlign: TextAlign.left,
                            ),
                          SizedBox(
                            height: 4,
                          ),
                          Text('FLIGHT 3231'),
                        ],
                      ),
                    ],
                  ),
                ],
              ),
            ],
          ),
        );

根据我的理解，如果我错了，请纠正我，应用Expanded / Flexible，Flexible只占用所需的空间，而Expanded则占用所有可用的空间，同时尊重柔性因素。因此，大多数时候我使用的是灵活的小部件，但这次它不起作用。

提前感谢您的帮助！

Answer 1

您可以使用灵活或扩展的Widget，下面的代码如下所示：

Card(
        shape: RoundedRectangleBorder(
          side: BorderSide(
            color: Colors.blue,
          ),
          borderRadius: BorderRadius.circular(15.0),
        ),
        margin: EdgeInsets.all(16.0),
        child: Container(
          padding: EdgeInsets.all(8.0),
          alignment: Alignment.centerLeft,
          child: Column(
            children: [
              Row(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Icon(Icons.directions_car),
                  SizedBox(
                    width: 10,
                  ),
                  Flexible(
                    child: Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        Text("Text 1"),
                        SizedBox(
                          height: 4,
                        ),
                        Text('TEXT 2'),
                      ],
                    ),
                  ),
                  SizedBox(
                    width: 27,
                  ),
                  Flexible(
                    child: Container(
                      child: Column(
                        children: [
                          Text(
                            '1 World Way, Los Angeles, CA 90045, USA',
                            textAlign: TextAlign.left,
                          ),
                          SizedBox(
                            height: 4,
                          ),
                          Text(
                            'FLIGHT 3231',
                            textAlign: TextAlign.left,
                          ),
                        ],
                      ),
                    ),
                  ),
                ],
              ),
            ],
          ),
        ),
      ),

你的屏幕是这样的：

​

Answer 2

尝试使用Expanded小部件，并根据UI填充的期望设置flex值。

示例代码：

Center(
        child: Container(
      height: 80,
      color: Colors.yellow,
      child: Row(
        mainAxisAlignment: MainAxisAlignment.start,
        children: [
          Padding(
            padding: const EdgeInsets.all(8.0),
            child: Icon(Icons.bus_alert),
          ),
          Expanded(
              flex: 1,
              child: Container(
                width: 1,
                color: Colors.green,
                child: Column(
                  children: [Text("Text 1"), Text("Text 1")],
                ),
              )),
          Expanded(
              flex: 3,
              child: Container(
                color: Colors.blue,
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.spaceAround,
                  children: [
                    Text("1 World Way, Los Angeles, CA 90045, USA"),
                    Text("FLIGHT 3231"),
                  ],
                ),
              ))
        ],
      ),
    ))

注意：使用的文本内容有一个限制。我们需要确保根据预期的文本长度来设置高度。

​

​

Answer 3

用固定宽度的容器包装它，然后使用文本。或者你可以用FittedBox固定宽度包装你的文本小部件。它也会采取同样的做法。您可以随意添加maxLine、minFontSize和maxFontSize' in auto_sized_text. Using展开的orFlexible``仅在文本长度小于给定宽度时才会影响容器的大小，而且在这种情况下无助于您。