使用 PageView.Builder 时，水平视口被赋予了无限的高度答案

【问题标题】：Horizontal viewport was given unbounded height while using PageView.Builder使用 PageView.Builder 时，水平视口被赋予了无限的高度
【发布时间】：2021-10-09 00:20:37
【问题描述】：

我正在开发带有BLoC 模式的简单测验应用程序。尝试使用 PageView.Builder 为每个测验实现滑动功能，这是我的代码

class _QuizScreenState extends State<QuizScreen> {
  @override
  void initState() {
    context.read<QuizInfoBloc>().add(GetQuizStat("1"));

    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      extendBodyBehindAppBar: true,
      backgroundColor: kSecondaryColor,
      appBar: AppBar(
        backgroundColor: Colors.transparent,
        elevation: 0,
        actions: [],
      ),
      body: Container(
        decoration: BoxDecoration(color: kSecondaryColor),
        width: double.infinity,
        height: double.infinity,
        child: SafeArea(
            child: Padding(
          padding: const EdgeInsets.symmetric(horizontal: 0),
          child: Column(
            children: [
              Padding(
                padding:
                    const EdgeInsets.symmetric(horizontal: kDefaultPadding / 2),
                child: ProgressBar(),
              ),
              Spacer(
                flex: 1,
              ),
              Padding(
                padding:
                    const EdgeInsets.symmetric(horizontal: kDefaultPadding / 2),
                child: BlocConsumer<QuizInfoBloc, QuizInfoState>(
                  listener: (context, state) {
                    // TODO: implement listener
                  },
                  builder: (context, state) {
                    if (state is QuizInfoLoaded) {
                      return PageView.builder(
                          itemCount: state.quiz.questions.length,
                          itemBuilder: (context, index) => QuestionCard(
                              question: state.quiz.questions[index]));
                    } else {
                      return Container(
                        height: 0,
                        width: 0,
                      );
                    }
                  },
                ),
              ),
              Spacer(
                flex: 4,
              ),
              BottomButtons(),
              SizedBox(
                height: 20,
              ),
              // AnswerExplanation(
              //   correctOrWrong: kGreenColor,
              // ),
            ],
          ),
        )),
      ),
    );
  }
}

我尝试将PageView.Builder 与Expanded 包装在一起，而Column 将其包装。但仍然出现不同的错误

              Padding(
                padding:
                    const EdgeInsets.symmetric(horizontal: kDefaultPadding / 2),
                child: BlocConsumer<QuizInfoBloc, QuizInfoState>(
                  listener: (context, state) {
                    // TODO: implement listener
                  },
                  builder: (context, state) {
                    if (state is QuizInfoLoaded) {
                      return Column(
                        children: [
                          Expanded(
                            child: PageView.builder(
                                itemCount: state.quiz.questions.length,
                                itemBuilder: (context, index) => QuestionCard(
                                    question: state.quiz.questions[index])),
                          ),
                        ],
                      );
                    } else {
                      return Container(
                        height: 0,
                        width: 0,
                      );
                    }
                  },
                ),
              ),

RenderFlex 子级具有非零 flex 但传入的高度约束是无限的。

问题卡

class _QuestionCardState extends State<QuestionCard> {
  @override
  Widget build(BuildContext context) {
    return Container(
      padding: EdgeInsets.all(kDefaultPadding / 2),
      child: Column(
        children: [
          Text(
            this.widget.question.questionText,
            style: Theme.of(context)
                .textTheme
                .headline5
                ?.copyWith(color: Colors.white, fontWeight: FontWeight.bold),
          ),
          SizedBox(
            height: 30,
          ),
          ListView.builder(
              scrollDirection: Axis.vertical,
              shrinkWrap: true,
              itemCount: this.widget.question.options.length,
              itemBuilder: (BuildContext context, int index) {
                return OptionUI(option: this.widget.question.options[index]);
              })
        ],
      ),
    );
  }
}

【问题讨论】：

标签： flutter dart bloc

【解决方案1】：

由于您已经将kSecondaryColor 作为Scaffold 的backgroundColor，因此您不需要将Container 作为Scaffold 的body：

Scaffold(
  extendBodyBehindAppBar: true,
  backgroundColor: kSecondaryColor,
  appBar: AppBar(
    backgroundColor: Colors.transparent,
    elevation: 0,
    actions: [],
  ),
  body: SafeArea(
    // child: ...
  ),
)

SafeArea 小部件用于顶级小部件树：

SafeArea(
  Scaffold(
    extendBodyBehindAppBar: true,
    backgroundColor: kSecondaryColor,
    appBar: AppBar(
      backgroundColor: Colors.transparent,
      elevation: 0,
      actions: [],
    ),
    body: Padding(
      // child: ...
    ),
  )
)

将Expanded 包装到您的BlocConsumer 的Padding 中：

Column(
  children: [
    Padding(
      padding: const EdgeInsets.symmetric(horizontal: kDefaultPadding / 2),
      child: ProgressBar(),
    ),
    Spacer(flex: 1),
    Expanded(
      child: Padding(
        padding: const EdgeInsets.symmetric(horizontal: kDefaultPadding / 2),
        child: BlocConsumer<QuizInfoBloc, QuizInfoState>(
          listener: (context, state) {
            // TODO: implement listener
          },
          builder: (context, state) {
            if (state is QuizInfoLoaded) {
              return PageView.builder(
                  itemCount: state.quiz.questions.length,
                  itemBuilder: (context, index) =>
                      QuestionCard(question: state.quiz.questions[index]));
            } else {
              return Container(height: 0, width: 0);
            }
          },
        ),
      ),
    ),
    Spacer(flex: 4),
    BottomButtons(),
    SizedBox(height: 20),
    // AnswerExplanation(correctOrWrong: kGreenColor),
  ],
);

您没有提供ProgressBar、QuestionCard 和BottomButtons 小部件，因此如果错误仍然存在，您应该检查它们，但我认为这些更改就足够了。

【讨论】：