flutter SingleChildScrollView内PageView内的ListView.builder发生未限制的高度错误

o8x7eapl 于 2022-12-14 发布在 Flutter

关注(0)|答案(2)|浏览(223)

Flutter医生：

Doctor summary (to see all details, run flutter doctor -v):
[√] Flutter (Channel stable, 3.3.9, on Microsoft Windows [Version 10.0.19044.2251], locale en-US)
[√] Android toolchain - develop for Android devices (Android SDK version 33.0.1)
[√] Chrome - develop for the web
[X] Visual Studio - develop for Windows
    X Visual Studio not installed; this is necessary for Windows development.
      Download at https://visualstudio.microsoft.com/downloads/.
      Please install the "Desktop development with C++" workload, including all of its default components
[√] Android Studio (version 2021.3)
[√] VS Code (version 1.74.0)
[√] Connected device (4 available)
[√] HTTP Host Availability

! Doctor found issues in 1 category.

最小可再现代码：

import 'package:flutter/material.dart';

class Temp extends StatefulWidget {
  const Temp({Key? key}) : super(key: key);

  @override
  State<Temp> createState() => _TempState();
}

class _TempState extends State<Temp> {
  @override
  Widget build(BuildContext context) {
    PageController pageController = PageController(
      initialPage: 0,
    );

    return Scaffold(
      body: Container(
        padding: const EdgeInsets.symmetric(horizontal: 30),
        margin:
            EdgeInsets.only(top: MediaQuery.of(context).viewPadding.top + 10),
        child: SingleChildScrollView(
          child: Column(
            mainAxisSize: MainAxisSize.min,
            children: [
              Container(
                  color: Colors.orangeAccent,
                  height: MediaQuery.of(context).size.height * 0.3,
                  width: MediaQuery.of(context).size.width,
                  child: const Center(child: Text('DUMMY BOX 3'))),
              Container(
                  color: Colors.purpleAccent,
                  height: MediaQuery.of(context).size.height * 0.2,
                  width: MediaQuery.of(context).size.width,
                  child: const Center(child: Text('DUMMY BOX 2'))),
              Container(
                color: Colors.lightBlueAccent,
                height: MediaQuery.of(context).size.height * 0.3,
                width: MediaQuery.of(context).size.width,
                child: const Center(
                  child: Text('DUMMY BOX 3'),
                ),
              ),
              const SizedBox(
                height: 40,
              ),
              PageView(
                controller: pageController,
                children: const [
                  DummyListViewContainerWidget(),
                  DummyListViewContainerWidget(),
                  DummyListViewContainerWidget()
                ],
              ),
            ],
          ),
        ),
      ),
    );
  }
}

class DummyListViewContainerWidget extends StatelessWidget {
  const DummyListViewContainerWidget({
    Key? key,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return ListView.separated(
        // physics: const NeverScrollableScrollPhysics(),
        shrinkWrap: true,
        itemCount: 10,
        padding: const EdgeInsets.only(bottom: 20),
        separatorBuilder: (cxt, index) {
          return const SizedBox(
            height: 10,
          );
        },
        itemBuilder: (cxt, index) {
          return Container(
            height: 50,
            width: MediaQuery.of(context).size.width,
            color: Colors.brown,
            child: Center(child: Text(index.toString())),
          );
        });
  }
}

期望：整个屏幕可滚动，而不仅仅是ListView。
尝试过的解决方案：

1.正在将SingleChildScrollView的下一列指定为MainAxisSize.min
1.为PageView提供高度，这不是我的案例的解决方案。为PageView提供高度只会将DummyListViewContainerWidget的视图显示为该高度，并将剪切其余部分。
1.从顶部删除SingleChildScrollView并将其放入PageView中。

flutter

来源：https://stackoverflow.com/questions/74781068/listview-builder-inside-pageview-inside-singlechildscrollview-gets-unbounded-hei

2条答案

按热度按时间

ht4b089n1#

尝试使用CustomScrollView，如下所示：

CustomScrollView(
  slivers: [
    SliverList(
      delegate: SliverChildListDelegate([
        Container(
          height: 100,
          color: Colors.blue,
        ),
        Container(
          height: 100,
          color: Colors.black,
        ),
        Container(
          height: 100,
          color: Colors.green,
        ),
        const SizedBox(
          height: 40,
        ),
      ]),
    ),
    SliverFillRemaining(
      hasScrollBody: true,
      child: PageView(
        controller: pageController,
        children: [
          DummyListViewContainerWidget(),
          DummyListViewContainerWidget(),
          DummyListViewContainerWidget(),
        ],
      ),
    ),
  ],
)

赞(0）回复(0）举报 2022-12-14

fnvucqvd2#

我已经更新了你的代码，使整个事情的工作：

import 'package:flutter/material.dart';

class Temp extends StatefulWidget {
  const Temp({Key? key}) : super(key: key);

  @override
  State<Temp> createState() => _TempState();
}

class _TempState extends State<Temp> {
  @override
  Widget build(BuildContext context) {
    PageController pageController = PageController(
      initialPage: 0,
    );

    return Scaffold(
      body: Container(
        padding: const EdgeInsets.symmetric(horizontal: 30),
        margin:
            EdgeInsets.only(top: MediaQuery.of(context).viewPadding.top + 10),
        child: SingleChildScrollView(
          child: Column(
            mainAxisSize: MainAxisSize.min,
            children: [
              Container(
                  color: Colors.orangeAccent,
                  height: MediaQuery.of(context).size.height * 0.3,
                  width: MediaQuery.of(context).size.width,
                  child: const Center(child: Text('DUMMY BOX 3'))),
              Container(
                  color: Colors.purpleAccent,
                  height: MediaQuery.of(context).size.height * 0.2,
                  width: MediaQuery.of(context).size.width,
                  child: const Center(child: Text('DUMMY BOX 2'))),
              Container(
                color: Colors.lightBlueAccent,
                height: MediaQuery.of(context).size.height * 0.3,
                width: MediaQuery.of(context).size.width,
                child: const Center(
                  child: Text('DUMMY BOX 3'),
                ),
              ),
              const SizedBox(
                height: 40,
              ),
              SizedBox(
                height: MediaQuery.of(context).size.height, //you just needed to add a definite height to your PageView
                child: PageView(
                  controller: pageController,
                  children: const [
                    DummyListViewContainerWidget(),
                    DummyListViewContainerWidget(),
                    DummyListViewContainerWidget()
                  ],
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

class DummyListViewContainerWidget extends StatelessWidget {
  const DummyListViewContainerWidget({
    Key? key,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return ListView.separated(
        // physics: const NeverScrollableScrollPhysics(),
        shrinkWrap: true,
        itemCount: 10,
        padding: const EdgeInsets.only(bottom: 20),
        separatorBuilder: (cxt, index) {
          return const SizedBox(
            height: 10,
          );
        },
        itemBuilder: (cxt, index) {
          return Container(
            height: 50,
            width: MediaQuery.of(context).size.width,
            color: Colors.brown,
            child: Center(child: Text(index.toString())),
          );
        });
  }
}

它几乎只是PageView，它导致了错误处理，它使代码完美地工作。

赞(0）回复(0）举报 2022-12-14

我来回答

flutter SingleChildScrollView内PageView内的ListView.builder发生未限制的高度错误

2条答案

相关问题

热门标签

最新问答