Flutter：如何修复行中的溢出？

Question

我在 DropdownMenuItem 中有一个 Row，但是当其中的一部分变长时，我会溢出。

这是截图：

这是代码：

Row(
                      children: [
                        Padding(
                          padding: const EdgeInsets.fromLTRB(5.0, 0.0, 30.0, 0.0),
                          child: Center(
                            widthFactor: 1,
                            child: CachedNetworkImage(
                              width: 40,
                              height: 40,
                              imageUrl: "https://[...].vercel.app/static/boatClasses/" + boat.boatClass + ".png",
                              progressIndicatorBuilder: (context, url, downloadProgress) => CircularProgressIndicator(value: downloadProgress.progress),
                              errorWidget: (context, url, error) => Icon(Icons.error),
                            ),
                          ),
                        ),
                        Column(
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: [
                            Text(
                              boat.name,
                              style: Theme.of(context).textTheme.bodyText1,
                              overflow: TextOverflow.ellipsis,
                            ),
                            Text(
                              (boat.country == "" ? "" : boat.country + " ") + boat.sailNumber.toString(),
                              style: Theme.of(context).textTheme.bodyText2,
                            ),
                          ],
                        ),
                        Expanded(
                          child: Row(
                            crossAxisAlignment: CrossAxisAlignment.center,
                            mainAxisAlignment: MainAxisAlignment.end,
                            children: [
                              boat == selectedBoat
                                  ? Padding(
                                      padding: const EdgeInsets.only(right: 16.0),
                                      child: Icon(
                                        Icons.check_box,
                                        size: 35.0,
                                        color: Color(Hive.box("configs").get("colors")["applegreen"]),
                                      ),
                                    )
                                  : Container(),
                              GestureDetector(
                                onTap: () => Navigator.push(context, MaterialPageRoute(builder: (context) => BoatForm(CreationState.edit, true, boat))),
                                child: Padding(
                                  padding: const EdgeInsets.symmetric(horizontal: 10.0),
                                  child: Icon(
                                    Icons.edit,
                                    color: Color(Hive.box("configs").get("colors")["primary"]),
                                  ),
                                ),
                              ),
                              GestureDetector(
                                onTap: () {
                                  DatabaseInstance.boat.deleteBoat(boat.documentid);
                                  setState(() {});
                                },
                                child: Padding(
                                  padding: const EdgeInsets.symmetric(horizontal: 10.0),
                                  child: Icon(
                                    Icons.delete,
                                    color: Color(Hive.box("configs").get("colors")["secondary"]),
                                  ),
                                ),
                              ),
                            ],
                          ),

我想要的是始终显示左侧的图像以及右侧的图标。然后应将中间的文本缩短到不会导致溢出的长度。我怎样才能做到这一点？

Answer 1

向溢出的小部件添加一个 Container，并将宽度 (Container) 更改为 double.infinity

Answer 2

您可以使用 FittedBox() 小部件包裹您的文本。这会使您的文本随其父小部件一起缩放。

我猜是船名溢出了，所以你应该用 boat.name.

将它包裹在你的文本周围

这是文档： https://api.flutter.dev/flutter/widgets/FittedBox-class.html

Answer 3

您可以使用环绕小部件。如果小部件放不下，它将把它们移到新的一行。

换行( children: [ ... ], );

Flutter：如何修复行中的溢出？

Flutter: How to fix overflow in row?

row

overflow

flutter