Flutter 轮播视图溢出，但是当热重载时，一切似乎都会自行修复

Question

我正在为我正在构建的应用程序开发一个页面。在此页面上，我使用 CarouselView 来显示卡片。这些卡片由背景图像组成，其顶部是另一个较小的图像、线性渐变、一列文本，其中一个子级是一行，其中该行的一个子级是另一行，以进行“评级” “瓷砖的一部分。当我重新启动应用程序并导航到此页面时，我收到一条错误消息，指出轮播已溢出到右侧，但轮播的溢出对我来说是有意义的。但是，当我热重新加载时，没有进行任何更改，问题就得到了解决，并且我得到了我期望看到的显示。 （如果这个解释没有意义，我已将代码和图像放在这篇文章中） 重新启动应用程序后 热重载后，未进行任何更改

我认为这是一个缺少填充的问题，我称之为这个小部件，但事实并非如此。 轮播的代码：

import 'package:flutter/material.dart';

class MyPracticesCarousel extends StatelessWidget {
  const MyPracticesCarousel({super.key});

  @override
  Widget build(BuildContext context) {
    return CarouselView(
      itemExtent: 325,
      itemSnapping: true,
      children: List<Widget>.generate(10, (int index) {
        return MyPracticeCard();
      }),
    );
  }
}



class MyPracticeCard extends StatelessWidget {
  const MyPracticeCard({
    super.key,
  });

  void viewPractice(BuildContext context)
  {
    print("Card pressed");
  }

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () => viewPractice(context),
      child: Card(
        color: Colors.white,
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(20),
        ),
        child: ClipRRect(
          borderRadius: BorderRadius.circular(20),
          child: Stack(
            children: [
              Container(
                decoration: const BoxDecoration(
                  image: DecorationImage(
                    image: AssetImage("assets/GP_front_image.jpg"),
                    fit: BoxFit.cover,
                    alignment: Alignment.topCenter,
                  ),
                ),
              ),
              Container(
                decoration: const BoxDecoration(
                  gradient: LinearGradient(
                    colors: [
                      Colors.black,
                      Colors.transparent,
                    ],
                    begin: Alignment.bottomCenter,
                    end: Alignment.center,
                    stops: [0.0, 1],
                  ),
                ),
              ),
              const Positioned(
                bottom: 20,
                left: 15,
                right: 15,
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Text(
                      "London Bridge General Practice",
                      style: TextStyle(
                        color: Colors.white,
                        fontSize: 16,
                        fontWeight: FontWeight.w500,
                      ),
                      overflow: TextOverflow.ellipsis,
                      maxLines: 1,
                    ),
                    // SizedBox(height: 2), // Optionally, uncomment for spacing
                    Row(
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      children: [
                        Expanded(
                          child: Text(
                            "0.2 miles",
                            style: TextStyle(
                              color: Colors.white,
                              fontSize: 16,
                              fontWeight: FontWeight.w400,
                            ),
                            overflow: TextOverflow.ellipsis,
                            maxLines: 1,
                          ),
                        ),
                        
                          Row(
                            mainAxisAlignment: MainAxisAlignment.end,
                            children: [
                              Text(
                                "4.5",
                                style: TextStyle(
                                  color: Colors.white,
                                  fontSize: 16,
                                  fontWeight: FontWeight.w400,
                                ),
                                overflow: TextOverflow.ellipsis,
                                maxLines: 1,
                              ),
                              SizedBox(width: 2,),
                              Icon(
                                Icons.star,
                                color: Colors.white, // Color of the star icon
                                size: 18, // Size of the star icon
                              ),
                              
                            ],
                          ),
                      
                      ],
                    ),
                  ],
                ),
              ),
              Positioned(
                top: 10,
                right: 10,
                child: ClipRRect(
                  borderRadius: BorderRadius.circular(10),
                  child: Image.asset(
                    "assets/HCA_logo.jpg",
                    width: 50,
                    height: 50,
                    fit: BoxFit.cover,
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

溢出问题来自嵌入的行，但我不明白为什么当我热重载时，UI 已修复？我希望从一开始就解决它。

Answer 1

似乎当第一次渲染轮播时，它仍在执行计算，这导致第二个小部件看起来就像被包裹一样。对于您的情况，有几种解决方案。首先是用Flexible包装评级小部件，如下代码所示：

                 Flexible( /// Flexible here
                      child: Row(
                        mainAxisAlignment: MainAxisAlignment.end,
                        children: [
                          Flexible( /// Flexible here
                            child: Text(
                              "4.5",
                              style: TextStyle(
                                color: Colors.white,
                                fontSize: 16,
                                fontWeight: FontWeight.w400,
                              ),
                              overflow: TextOverflow.ellipsis,
                              maxLines: 1,
                            ),
                          ),
                          SizedBox(width: 2),
                          Flexible( /// Flexible here
                            child: Icon(
                              Icons.star,
                              color: Colors.white,
                              size: 18, 
                            ),
                          ),

或者可以添加与itemExtent相同值的shrinkExtent，即320，如下代码所示：

CarouselView(
  itemExtent: 320,
  shrinkExtent: 320, /// add shrinkExtent here
  itemSnapping: true,
  children: List<Widget>.generate(10, (int index) {
    return MyPracticeCard();
  }),
)

但是如果你添加与itemExtent相同宽度的shrinkExtent，就不会有任何像环绕或对齐这样的动画。