文本连续溢出，颤动 [英] Text Overflowing in a Row, Flutter

问题描述

由于文本过长，我遇到了布局问题，我尝试使用 Expanded/Flexible 将导致问题的文本填充到它需要的空间，但它已经溢出.我知道这个问题被问了一百次，但我不明白错误在哪里.我尝试将 Expanded/Flexible 分别和同时应用于所有行/列(主要是我在尝试布局以尝试修复它)，我仍然有问题...我什至尝试将 FittedBox 与 fit: BoxFit.(all of them) 一起使用.

I'm having issues with the layout because of the long text, I've tried using Expanded / Flexible with the text that is causing the issue to fill the space it needs but it's overflowing. I know the question is asked hundred times, but I don't understand where is the mistake. I tried applying to both Expanded / Flexible to all of the Row/Columns individually and too all at the same time (mostly I was trying out layouts to try to fix it), and I still have the issue... I even tried to use the FittedBox with 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 占用所有可用空间，尊重弹性系数.所以大部分时间我都使用灵活的小部件，但这次它不起作用.

By my understanding, and do correct me if I'm wrong, applying Expanded / Flexible, Flexible takes only the needed space, and Expanded takes all available space, respecting the flex factor. So most of the time I use the Flexible widget, but this time it is not working.

预先感谢您的帮助！

推荐答案

您可以使用 Flexible 或 Expanded Widget 您应该尝试使用以下代码:

You can use Flexible or Expanded Widget You should try to below code :

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

你的屏幕是这样的:

这篇关于文本连续溢出，颤动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！