水平视口被赋予无限高度 - Flutter

Question

我是应用程序开发的新手，在渲染水平卡片滚动时遇到错误。

howItWorks.dart

class HowItWorksCards extends StatefulWidget {
  HowItWorksCards();
  @override
  _HowItWorksCardsState createState() => _HowItWorksCardsState();
}

class _HowItWorksCardsState extends State<HowItWorksCards> {
  int _currentPage = 0;
  PageController _pageController = PageController(viewportFraction: 0.8, keepPage: true);

  List<Widget> _pages = [
    SliderPage(
        index: 1,
        title: "Title1",
        info:"Summary",
        image: "assets/images/howItWorks/1.png"),
    SliderPage(
        index: 1,
        title: "Title1",
        info:"Summary",
        image: "assets/images/howItWorks/1.png"),
    SliderPage(
        index: 1,
        title: "Title1",
        info:"Summary",
        image: "assets/images/howItWorks/1.png"),
  ];

  _onchanged(int index) {
    setState(() {
      _currentPage = index;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisSize: MainAxisSize.min,
      children: <Widget>[
        Flexible(
          flex: 5,
          child: PageView.builder(  // this throws the exception.
            controller: _pageController,
            // physics: BouncingScrollPhysics(),
            scrollDirection: Axis.horizontal,
            itemCount: _pages.length,
            onPageChanged: _onchanged,
            itemBuilder: (context, int index) {
              return _pages[index];
            },
          ),
        ),
        Flexible(   //  this works absolutely fine when the above Flexible widget is commented.
          flex: 4,
          child: Row(
              crossAxisAlignment: CrossAxisAlignment.start,
              mainAxisAlignment: MainAxisAlignment.center,
              children: List<Widget>.generate(
                _pages.length,
                    (int index) {
                  return AnimatedContainer(
                      duration: Duration(milliseconds: 300),
                      height: 5,
                      width: (index == _currentPage) ? 30 : 10,
                      margin: EdgeInsets.symmetric(horizontal: 5, vertical: 10),
                      decoration: BoxDecoration(
                          borderRadius: BorderRadius.circular(5),
                          color: (index == _currentPage)
                              ? AppTheme.globalTheme.primaryColor
                              : AppTheme.globalTheme.primaryColor
                              .withOpacity(0.5)));
                },
              )),
        ),
      ],
    );
  }
}

滑块.dart

class SliderPage extends StatelessWidget {
  final String image;
  final int index;
  final String title;
  final String info;

  SliderPage(
      {@required this.image,
        @required this.info,
        @required this.title,
        @required this.index});

  @override
  Widget build(BuildContext context) {
    return Card(
      elevation: 20,
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(30.0),
      ),
      child: Column(
          mainAxisSize: MainAxisSize.min,
          mainAxisAlignment: MainAxisAlignment.start,
          children: [
            Container(
              padding: const EdgeInsets.all(5.0),
              height: 175,
              child: Image.asset(
                image,
                fit: BoxFit.fitHeight,
              ),
            ),
            Padding(
              padding: const EdgeInsets.symmetric(vertical: 5),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.center,
                crossAxisAlignment: CrossAxisAlignment.center,
                children: [
                  Padding(
                    padding: const EdgeInsets.only(left: 5),
                    child: Text(this.title,
                        style: getFontStyle(
                            bold: true,
                            color: Color(0xFF3C3C43),
                            fontSize: 18,
                            fontStyle: FontStyles.SFProDisplay),
                        textAlign: TextAlign.center),
                  ),
                ],
              ),
            ),
            Container(
              padding:
              const EdgeInsets.symmetric(horizontal: 10.0, vertical: 5),
              child: Text(
                this.info,
                style: getFontStyle(
                    color: Color(0xFF3C3C43),
                    fontSize: 16,
                    fontStyle: FontStyles.SFProDisplay),
                textAlign: TextAlign.center,
              ),
            ),
          ]),
    );
  }
}

主程序.dart

void main() => runApp(MaterialApp(home: AmazonOrdersInvoiceOnboarding()));

class AmazonOrdersInvoiceOnboarding extends StatelessWidget {
  
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: GoBackAppBar(
        customBackGroundColor: Color(0x1affb500),
        title: "",
      ),
      body: ListView(
        shrinkWrap: true,
        children: [
          
          HowItWorksCards(),
          
        ],
      ),
    );
  }
}

我遇到了一些例外情况。

1. 水平视口被赋予无限高度。- 已经使用过灵活。不知道为什么我仍然收到此异常。

2. RenderBox 未布局：RenderViewport#c29be NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE

我在SO上发现了很多相关问题，但没有结果。

Answer 1

当我们在另一个内部使用无限大小的小部件时，会发生此错误，这里您使用的是Columninside ListView，两者都采用无限高度，如果您包装Column固定大小的小部件，它将解决问题，

我强烈建议你观看 flutter 的这段视频 https://www.youtube.com/watch?v=jckqXR5CrPI

在howItWorks.dart

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisSize: MainAxisSize.min,
      children: <Widget>[
        Flexible(
          flex: 5,
          child: Container(
            height: 250,
            child: PageView.builder(
              // this throws the exception.
              controller: _pageController,
              // physics: BouncingScrollPhysics(),
              scrollDirection: Axis.horizontal,
              itemCount: _pages.length,
              onPageChanged: _onchanged,
              itemBuilder: (context, int index) {
                return _pages[index];
              },
            ),
          ),
        ),
        Flexible(
          //  this works absolutely fine when the above Flexible widget is commented.
          flex: 4,
          child: Row(
              crossAxisAlignment: CrossAxisAlignment.start,
              mainAxisAlignment: MainAxisAlignment.center,
              children: List<Widget>.generate(
                _pages.length,
                (int index) {
                  return AnimatedContainer(
                      duration: Duration(milliseconds: 300),
                      height: 5,
                      width: (index == _currentPage) ? 30 : 10,
                      margin: EdgeInsets.symmetric(horizontal: 5, vertical: 10),
                      decoration: BoxDecoration(
                          borderRadius: BorderRadius.circular(5),
                          color: Colors.amber)
                      //  (index == _currentPage)
                      //     ? AppTheme.globalTheme.primaryColor
                      //     : AppTheme.globalTheme.primaryColor
                      //     .withOpacity(0.5))
                      );
                },
              )),
        ),
      ],
    );
  }