文本连续溢出，颤动

如何解决文本连续溢出，颤动

由于文本太长，我在布局方面遇到了问题，我尝试将 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,Text('FLIGHT 3231'),);

根据我的理解，如果我错了，请纠正我，应用 Expanded / Flexible，Flexible 只占用需要的空间，而 Expanded 占用所有可用空间空间，尊重弹性系数。所以大部分时间我都使用灵活的小部件，但这次它不起作用。

预先感谢您的帮助！

解决方法

尝试使用 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"),],))
        ],))

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

,

用固定宽度的容器包裹它，然后使用auto_sized_text。或者您可以通过 FittedBox 按固定宽度包装您的 Text 小部件。它会采用相同的方法。随意添加 maxLine、minFontSize 和 maxFontSize' in auto_sized_text. Using ExpandedorFlexible` 仅在您的文本长度小于给定宽度时影响容器的大小，并且它不会在这种情况下无法帮助您。

,

您可以使用 Flexible 或 Expanded 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,USA',textAlign: TextAlign.left,SizedBox(
                            height: 4,Text(
                            'FLIGHT 3231',

你的屏幕是这样的：

,

如果文本真的很长，那么使用 Expanded 将根据父小部件包装文本，从而导致字体大小发生变化。您可以考虑使用省略号。

return Container(
  width:300  //give a width of your choice
  child: Text('Any long text',overflow:TextOverflow.ellipsis,);