布局：Flutter 中的文本溢出

Question

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

代码如下：

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

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

Answer 1

将 Flexible 添加到 Row

中的所有小部件

更改 flex 值以调整每个项目的大小。

...

Row(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: [
        Flexible(
          flex: 3,
          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',
                    overflow: TextOverflow.clip),
                Text('7/22/2021 14:59'),
              ],
            ),
          ),
        ),
        Flexible(
          flex: 1,
          child: Padding(
            padding: const EdgeInsets.only(right: 22.0),
            child: TextButton(
              onPressed: () {
                //some logic
              },
              child: Text('VIEW'),
            ),
          ),
        ),
      ],
    );

...

Answer 2

我添加了一个 Expanded to Column 以使其填充尽可能多 space。

为了使高度根据文本动态变化，我删除了 Container 的固定高度，并在 Column 中添加了属性 "mainAxisSize: MainAxisSize.min" 以尽可能少地填充 space尽可能。

最后，我调整了填充，为了让文本之间有间距，我在它们之间使用了 Sizedbox。

...

Container(
            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),
            padding: EdgeInsets.symmetric(vertical: 16.0, horizontal: 16.0),
            child: Row(
              children: [
                Expanded(
                  child: Column(
                    mainAxisSize: MainAxisSize.min,
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Text('7/22/2021 14:59'),
                      SizedBox(height: 8.0),
                      Text(
                        'New York, NY, USA - 1 World Way, Los Angeles, CA 90045, USA',
                      ),
                      SizedBox(height: 8.0),
                      Text('7/22/2021 14:59'),
                    ],
                  ),
                ),
                TextButton(
                  onPressed: () {
                    //some logic
                  },
                  child: Text('VIEW'),
                ),
              ],
            ),
          ),

...

Answer 3

您应该使用 Flexible 或 Expanded Widget，如下面的代码：

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

您的输出屏幕如下所示：

布局：Flutter 中的文本溢出

Layout: Text overflowing in Flutter

mobile

flutter

flutter-layout

flutter-text