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://trimlog.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將它包裹在你的 Text 周圍。

這是文檔： https://api.flutter.dev/flutter/widgets/FittedBox-class.html

Answer 3

您可以使用 Wrap 小部件。 如果它們不適合，它會將小部件移動到新行。

包裝（兒童：[...]，）；