布局:Flutter 中的文本溢出 [英] Layout: Text overflowing in Flutter

问题描述

我有一个问题，我的文字溢出了右侧的卡片，但我尝试应用 Expanded Flexible，我尝试使用 FittedBox使用 fit: BoxFit.scaleDown 但没有用，所以要么我把它们放在错误的祖先顺序中，要么是其他问题.最初，Container 的高度应该是 98 但由于文本很长，我想保留设计但高度可以更改为是动态的而不是固定的，因为我想将文本放入 Card 小部件中.

I have an issue where my text overflows the card on the right, but I tried applying Expanded Flexible, I tried using FittedBox with the fit: BoxFit.scaleDown but no use, so either I'm putting them in the wrong ancestry order or something else is the issue. Initially, the height of the Container was supposed to be 98 but due to the text being long as it is, I would like to keep the design but the height can change to be dynamically and not fixed since I want to fit the text inside the Card widget.

代码如下:

Card(
                                          color: Color(0xFF29ABE2),
                                          elevation: 4,
                                          shape: RoundedRectangleBorder(
                                            borderRadius:
                                                BorderRadius.circular(4),
                                          ),
                                          child: Wrap(
                                            children: [
                                              Container(
                                                height: 98, // height can changed in order to fit the text, but I would like to make it more dynamically then instead of giving it a fixed height
                                                width: MediaQuery.of(context)
                                                    .size
                                                    .width,
                                                decoration: BoxDecoration(
                                                    color: Colors.white,
                                                    borderRadius:
                                                        BorderRadius.only(
                                                            bottomRight: Radius
                                                                .circular(4),
                                                            topRight:
                                                                Radius.circular(
                                                                    4))),
                                                margin:
                                                    EdgeInsets.only(left: 3),
                                                child: Row(
                                                  mainAxisAlignment:
                                                      MainAxisAlignment
                                                          .spaceBetween,
                                                  children: [
                                                    Padding(
                                                      padding:
                                                          const EdgeInsets.only(
                                                              left: 16.0),
                                                      child: Column(
                                                        crossAxisAlignment:
                                                            CrossAxisAlignment
                                                                .start,
                                                        mainAxisAlignment:
                                                            MainAxisAlignment
                                                                .spaceEvenly,
                                                        children: [
                                                          Text('7/22/2021 14:59'),
                                                          Text('New York, NY, USA - 1 World Way, Los Angeles, CA 90045, USA'),
                                                          Text('7/22/2021 14:59'),
                                                        ],
                                                      ),
                                                    ),
                                                    Padding(
                                                      padding:
                                                          const EdgeInsets.only(
                                                              right: 22.0),
                                                      child: TextButton(
                                                        onPressed: () {
                                                         //some logic
                                                        },
                                                        child: Text('VIEW'),
                                                      ),
                                                    ),
                                                  ],
                                                ),
                                              ),
                                            ],
                                          ),
                                        ),

我已经从小部件中删除了样式属性，以便可以更轻松地查看代码.在此先感谢您的帮助！

I have removed the style properties from the widget so the code can be seen easier. Thanks in advance for the help!

推荐答案

你应该使用 Flexible or Expanded Widget 像下面的代码:

You should use Flexible or Expanded Widget like as below code :

            Card(
              color: Color(0xFF29ABE2),
              elevation: 4,
              shape: RoundedRectangleBorder(
                borderRadius: BorderRadius.circular(4),
              ),
              child: Wrap(
                children: [
                  Container(
                    height: 98,
                    width: MediaQuery.of(context).size.width,
                    decoration: BoxDecoration(
                      color: Colors.white,
                      borderRadius: BorderRadius.only(
                        bottomRight: Radius.circular(4),
                        topRight: Radius.circular(4),
                      ),
                    ),
                    margin: EdgeInsets.only(left: 3),
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      children: [
                        Flexible(
                          child: Padding(
                            padding: const EdgeInsets.only(left: 16.0),
                            child: Column(
                              crossAxisAlignment: CrossAxisAlignment.start,
                              mainAxisAlignment:
                                  MainAxisAlignment.spaceEvenly,
                              children: [
                                Text('7/22/2021 14:59'),
                                Text(
                                    'New York, NY, USA - 1 World Way, Los Angeles, CA 90045, USA'),
                                Text('7/22/2021 14:59'),
                              ],
                            ),
                          ),
                        ),
                        Padding(
                          padding: const EdgeInsets.only(right: 22.0),
                          child: TextButton(
                            onPressed: () {
                              //some logic
                            },
                            child: Text('VIEW'),
                          ),
                        ),
                      ],
                    ),
                  ),
                ],
              ),
            ),

您的输出屏幕如下所示:

your output screen look like this:

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