未知物品尺寸的Flutter缠绕对齐

iklwldmw  于 2022-12-19  发布在  Flutter
关注(0)|答案(2)|浏览(124)

如何对大小未知的行进行自动换行(因为它们包含文本)?我还需要保持行与行之间的对齐。
我查看了GridView.extent,但它需要提供一个特定的最大范围。
我的代码是:

SizedBox(
      width: double.infinity,
      child: Wrap(
        spacing: 5,
        runSpacing: 5,
        alignment: WrapAlignment.spaceBetween,
        children: [
          Row(
            mainAxisSize: MainAxisSize.min,
            children: [
              const Text("Comfort"),
              const SizedBox(width: 10),
              CustomRatingBarIndicator(rating: aggregateReview.comfortRating),
            ],
          ),
          Row(
            mainAxisSize: MainAxisSize.min,
            children: [
              const Text("Safety"),
              const SizedBox(width: 10),
              CustomRatingBarIndicator(rating: aggregateReview.safetyRating)
            ],
          ),
          Row(
            mainAxisSize: MainAxisSize.min,
            children: [
              const Text("Reliability"),
              const SizedBox(width: 10),
              CustomRatingBarIndicator(rating: aggregateReview.reliabilityRating)
            ],
          ),
          Row(
            mainAxisSize: MainAxisSize.min,
            children: [
              const Text("Hospitality"),
              const SizedBox(width: 10),
              CustomRatingBarIndicator(rating: aggregateReview.hospitalityRating)
            ],
          ),
        ],
      ),
    ),

它当前的外观如下所示:

星号和文本都应该对齐。当然,星号总是有相同的大小,但文本不是(因为操作系统的原因,文本可能会更大)。因此,有时两个项目可以放在一个网格行中,但当屏幕很窄,文本很大时,我们需要将所有项目放在另一个下面。
有什么办法吗?

anauzrmj

anauzrmj1#

可能有许多方法可以实现这一点,但其中一种方法是利用灵活性。

Row(
            mainAxisSize: MainAxisSize.min,
            children: [
              Flexible(child: SizedBox(width:40, child: Text("Comfort"),),),
              const SizedBox(width: 10),
              CustomRatingBarIndicator(rating: aggregateReview.comfortRating),
            ],
          ),

现在你所做的是给你的文本固定的宽度。所以一切都将对齐。灵活的是当你有两个词,它将移动到下一行。

9njqaruj

9njqaruj2#

作为text小部件的问题,你可以这样解决这个问题:

Container(
width: 80, //you can define like this 

child: Text("Hospitality",
    maxLines: 1,
    overflow: TextOverflow.ellipsis,
),
)

相关问题