CarouselSlider 和 ListView 的 RenderBox 错误：RenderRepaintBoundary#83bf7 NEEDS-LAYOUT NEEDS-PAINT

Question

我正在尝试获得如下图所示的结果。但是执行welcome.dart文件时，出现如下错误。 如果我return把carousel和listview分开，就没有错误了。

import 'package:flutter/material.dart';
import 'package:carousel_slider/carousel_slider.dart';

class Welcome extends StatefulWidget {
  const Welcome({Key? key, this.title}) : super(key: key);

  final String? title;

  @override
  _WelcomeState createState() => _WelcomeState();
}

class _WelcomeState extends State<Welcome> {
  @override
  Widget build(BuildContext context) {
    final screenHeight = MediaQuery.of(context).size.height * 1;

return Scaffold(
  backgroundColor: const Color(0xffdfe1e8),
  body: ListView(
      padding: EdgeInsets.only(top: screenHeight * 0.15),
      children: [
        SizedBox(
          height: screenHeight * 0.6,
          child: Image.asset('assets/bg/splash.png'),
        ),
      ]),
  persistentFooterButtons: <Widget>[
    Stack(
      children: [
        SizedBox(
            height: 300,
            child: Column(
              children: [
                ListView(
                  children: [
                    CarouselSlider(
                      items: const [
                        Text(
                            'Tad asdfnwei asedftdoi vasdfazsdd asdfasd asdfasd sdfsfd  asdfasf a sadfdsfdsfad adfadfa adsfadfef  adsfadsfaf asdfafe4rfsdfvsdaf  afe4f adsfafaaf'),
                        Text(
                            'Tad asdfnwei asedftdoi vasdfazsdd asdfasd asdfasd sdfsfd  asdfasf a sadfdsfdsfad adfadfa adsfadfef  adsfadsfaf asdfafe4rfsdfvsdaf  afe4f adsfafaaf'),
                        Text(
                            'Tad asdfnwei asedftdoi vasdfazsdd asdfasd asdfasd sdfsfd  asdfasf a sadfdsfdsfad adfadfa adsfadfef  adsfadsfaf asdfafe4rfsdfvsdaf  afe4f adsfafaaf'),
                        Text(
                            'Tad asdfnwei asedftdoi vasdfazsdd asdfasd asdfasd sdfsfd  asdfasf a sadfdsfdsfad adfadfa adsfadfef  adsfadsfaf asdfafe4rfsdfvsdaf  afe4f adsfafaaf'),
                        Text(
                            'Tad asdfnwei asedftdoi vasdfazsdd asdfasd asdfasd sdfsfd  asdfasf a sadfdsfdsfad adfadfa adsfadfef  adsfadsfaf asdfafe4rfsdfvsdaf  afe4f adsfafaaf'),
                      ],

                      //Slider Container properties
                      options: CarouselOptions(
                        height: 180.0,
                        // enlargeCenterPage: true,
                        autoPlay: true,
                        aspectRatio: 2 / 1,
                        autoPlayCurve: Curves.linear,
                        enableInfiniteScroll: false,
                        autoPlayAnimationDuration:
                            Duration(milliseconds: 800),
                        viewportFraction: 1,
                        scrollDirection: Axis.horizontal,
                      ),
                    ),
                  ],
                ),
                Row(
                   children: [
                     OutlinedButton(
                         onPressed: () {}, child: const Text('Skip')),
                     OutlinedButton(
                         onPressed: () {}, child: const Text('Next')),
                   ],
                ),
              ],
            )),
          ],
        )
      ],
    );
  }
}

This is Error

作为 Flutter 的新手，我快要疯了，因为我想不通为什么。 我在谷歌上搜索了很多，但似乎没有适合我情况的解决方案。 谢谢。

Answer 1

您可以通过在 SizedBox 上提供宽度来解决此问题，虽然我们不需要额外的 ListView，但我们可以将其删除。并在行上使用 mainAxisAlignment: MainAxisAlignment.spaceBetween, 以获得 UI。此外，您可以在 body 上使用 LayoutBuilder 来获取约束以替换 MediaQuery.

class Welcome extends StatefulWidget {
  const Welcome({Key? key, this.title}) : super(key: key);

  final String? title;

  @override
  _WelcomeState createState() => _WelcomeState();
}

class _WelcomeState extends State<Welcome> {
  @override
  Widget build(BuildContext context) {
    final screenHeight = MediaQuery.of(context).size.height * 1;

    return Scaffold(
      backgroundColor: const Color(0xffdfe1e8),
      body: ListView(
          padding: EdgeInsets.only(top: screenHeight * 0.15),
          children: [
            SizedBox(
              height: screenHeight * 0.6,
              child: Image.asset('assets/bg/splash.png'),
            ),
          ]),
      persistentFooterButtons: <Widget>[
        Stack(
          children: [
            SizedBox(
                height: 300,
                width: MediaQuery.of(context).size.width,
                child: Column(
                  children: [
                    // ListView(
                    //   children: [
                    CarouselSlider(
                      items: const [
                        Text(
                            'Tad asdfnwei asedftdoi vasdfazsdd asdfasd asdfasd sdfsfd  asdfasf a sadfdsfdsfad adfadfa adsfadfef  adsfadsfaf asdfafe4rfsdfvsdaf  afe4f adsfafaaf'),
                        Text(
                            'Tad asdfnwei asedftdoi vasdfazsdd asdfasd asdfasd sdfsfd  asdfasf a sadfdsfdsfad adfadfa adsfadfef  adsfadsfaf asdfafe4rfsdfvsdaf  afe4f adsfafaaf'),
                        Text(
                            'Tad asdfnwei asedftdoi vasdfazsdd asdfasd asdfasd sdfsfd  asdfasf a sadfdsfdsfad adfadfa adsfadfef  adsfadsfaf asdfafe4rfsdfvsdaf  afe4f adsfafaaf'),
                        Text(
                            'Tad asdfnwei asedftdoi vasdfazsdd asdfasd asdfasd sdfsfd  asdfasf a sadfdsfdsfad adfadfa adsfadfef  adsfadsfaf asdfafe4rfsdfvsdaf  afe4f adsfafaaf'),
                        Text(
                            'Tad asdfnwei asedftdoi vasdfazsdd asdfasd asdfasd sdfsfd  asdfasf a sadfdsfdsfad adfadfa adsfadfef  adsfadsfaf asdfafe4rfsdfvsdaf  afe4f adsfafaaf'),
                      ],

                      //Slider Container properties
                      options: CarouselOptions(
                        height: 180.0,
                        // enlargeCenterPage: true,
                        autoPlay: true,
                        aspectRatio: 2 / 1,
                        autoPlayCurve: Curves.linear,
                        enableInfiniteScroll: false,
                        autoPlayAnimationDuration: Duration(milliseconds: 800),
                        viewportFraction: 1,
                        scrollDirection: Axis.horizontal,
                      ),
                      //   ),
                      // ],
                    ),
                    Row(
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      children: [
                        OutlinedButton(
                            onPressed: () {}, child: const Text('Skip')),
                        OutlinedButton(
                            onPressed: () {}, child: const Text('Next')),
                      ],
                    ),
                  ],
                )),
          ],
        )
      ],
    );
  }
}