使用 PageView.Builder 时水平视口被赋予无限高度

Question

我正在开发具有 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,
              // ),
            ],
          ),
        )),
      ),
    );
  }
}

我试过用 Expanded 包装 PageView.Builder，然后用 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 children have non-zero flex but incoming height constraints are unbounded.

问题卡

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]);
              })
        ],
      ),
    );
  }
}

Answer 1

因为您的 Scaffold 已经有 kSecondaryColor 作为 backgroundColor，所以您不需要 Container 作为 [=26] =]正文你的 Scaffold:

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 小部件，因此如果错误仍然存在，您应该检查它们，但我认为这些更改应该足够了。

使用 PageView.Builder 时水平视口被赋予无限高度

Horizontal viewport was given unbounded height while using PageView.Builder

flutter

dart

bloc