使用 Expanded/Flexible 在 Row 中摆动多个项目

Question

我想在 Row 中添加更多（在此示例中为 4）项。我尝试使用 Expanded 或 Flexible 或 mainAxisAlignment: MainAxisAlignment.spaceEvenly 来填满屏幕的所有宽度。但我想说项目的具体宽度和高度为 50 像素，而项目周围的 GestureDetector 为屏幕的 1/4（4 个项目 = 全宽）。所以我在行中的任何地方都会选择一些东西。我的问题是，我的每个解决方案都会使项目（圆圈）变形，或者圆圈必须非常大，宽度 = 高度才能不变形。我还尝试将整个 _ratingEmoji 包裹在 Expanded 中，并为最大宽度提供 ratingItem.ratingIndicator 约束，但结果相同。

项目行：

Row(
  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
  children: [
    for (var ratingItem in editGroceryRatingProvider.foodRatings)
      _ratingEmoji(editGroceryRatingProvider, ratingItem, context),
  ],
),

项目：

Widget _ratingEmoji(EditGroceryRatingProvider editGroceryRatingProvider,
  SelectedFoodRating ratingItem, BuildContext context) {
return GestureDetector(
  child: ratingItem.selected
      ? Container(
          width: MediaQuery.of(context).size.width / 8,
          height: MediaQuery.of(context).size.width / 8,
          padding: const EdgeInsets.all(2.0),
          decoration: BoxDecoration(
              border: Border.all(
                color: Color(0xFF312ADB),
                width: 3.0,
              ),
              borderRadius: BorderRadius.circular(32.0)),
          child: Center(
            child: ratingItem.ratingIndicator,
          ),
        )
      : ratingItem.ratingIndicator,
  onTap: () => editGroceryRatingProvider.updateSelectedRating(ratingItem),
);

}

RatingIndicator，即屏幕上的“圆圈”项：

Container(
  decoration: BoxDecoration(
    border: Border.all(
      color: color,
      width: 1.5,
    ),
    borderRadius: BorderRadius.circular(64.0),
  ),
  child: Container(
    decoration: BoxDecoration(
      border: Border.all(
        color: Colors.white,
        width: 3.0,
      ),
      borderRadius: BorderRadius.circular(64.0),
    ),
    child: ClipOval(
      child: Container(
        width: width ?? MediaQuery.of(context).size.width / 7,
        height: height ?? MediaQuery.of(context).size.width / 7,
        color: color,
      ),
    ),
  ),
);

非常感谢。

更新：

项目应该保持它们在屏幕截图上的样子，但“整”行应该是可点击的（意味着即使您在 2 个项目之间点击，也应该选择更接近点击的项目）

Answer 1

检查，请解决。整个区域都是可点击的。你只需要添加你的项目而不是我的。

@override
  Widget build(BuildContext context) {
    final colors = [Colors.red, Colors.blue, Colors.brown, Colors.cyan];
    return Scaffold(
      body: Container(
        alignment: Alignment.center,
        color: const Color(0xffFAFAFA),
        child: Row(
          children: List.generate(
              colors.length,
              (index) => Expanded(
                    child: GestureDetector(
                        onTap: () => print('Tapped:$index'),
                        child: Container(
                          height: 50,
                          color: Colors.transparent,
                          child: Container(
                            decoration: BoxDecoration(
                              shape: BoxShape.circle,
                              color: colors[index],
                            ),
                          ),
                        )),
                  )),
        ),
      ),
    );

使用 Expanded/Flexible 在 Row 中摆动多个项目

Flutter multiple items in Row with Expanded/Flexible

flutter

flutter-layout

flutter-row