Column/SingleChildScrollView 不滚动

Question

我正在学习 flutter 制作应用程序。 在这里，我试图制作一个页面来显示完整的帖子。 问题是页面没有作为一个整体滚动。

class SinglePostPage extends StatefulWidget {
  final Post? post;
  const SinglePostPage({Key? key, this.post}) : super(key: key);

  @override
  State<SinglePostPage> createState() => _SinglePostPageState();
}

class _SinglePostPageState extends State<SinglePostPage> {

  @override
  Widget build(BuildContext context) {

    return Scaffold(
      body: Column(
        mainAxisSize: MainAxisSize.min,
        children: [
          Container(
            margin: const EdgeInsets.only(top: 22.5),
            padding: const EdgeInsets.fromLTRB(0, 5, 0, 6),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    const BackButton(),
                    Row(
                      children: [
                        InkWell(
                          onTap: () {
                            showDialog(...);
                          },
                          child: CircleAvatar(...),
                        Container(
                          padding: const EdgeInsets.only(left: 5.4),
                          child: Column(
                            crossAxisAlignment: CrossAxisAlignment.start,
                            children: [
                              GestureDetector(
                                onTap: () {
                                  showDialog(...);
                                },
                                child: Text(
                                  widget.post!.author[0].profileName,
                                ),
                              ),
                              const SizedBox(height: 4),
                              Text(
                                showTimeAgo(widget.post!.postTime).toString(),
                              ),
                            ],
                          ),
                        ),
                      ],
                    ),
                    PopupMenuButton(
                      icon: const Icon(Icons.more_vert),
                      itemBuilder: (context) => [...],
                ),
                Container(
                  margin: const EdgeInsets.fromLTRB(12, 9, 12, 3),
    // when the text is longer than the screen height it showed RenderFlex overflowed error so I put constraints. how to show it full and make this scroll
                  constraints: BoxConstraints( 
                      maxHeight: MediaQuery.of(context).size.height * 0.54,
                      minHeight: 50),
                  child: SingleChildScrollView(
                    child: Text(
                      widget.post!.postText,
                      textAlign: TextAlign.start,
                    ),
                  ),
                ),
                Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    if (widget.post!.postMedia.isNotEmpty)
                      CarouselSlider.builder(...),
                    const SizedBox(height: 4.5),
                    if (widget.post!.postMedia.length > 1)
                      buildDotIndicator(widget.post!.postMedia),
                  ],
                ),
              ],
            ),
          ),
          Container(
            // post reactions row
          ),
          CommentBodyWidget(
            postId: widget.post!.postId,
          ),
        ],
      ),
    );
  }
}

我查找了其他答案并尝试用 SingleChildScrollView 包装它，但它没有用，并且 ListView with shrinkWrap: true也给出了“ParentDataWidget 的不正确使用”错误。

CommentBodyWidget 有一个列表视图生成器。 它在自己滚动，但上面的小部件没有随之滚动。

我怎样才能显示整个页面并一起滚动，而不必将长帖子限制在受限容器中？ 请帮忙。

Answer 1

您可以使用SingleChildScrollView包装body Column并使用shrinkWrap: true,并使用physics: NeverScrollableScrollPhysics(), 。 这将解决问题。

return Scaffold(
  body: SingleChildScrollView(
    child: Column(
      children: [
        //...

        ListView.builder(
          itemCount: itemlength,
          shrinkWrap: true,
          physics: const NeverScrollableScrollPhysics(),
          itemBuilder: (context, index) {
            return Text("item $index");
          },
        ),

        /// instead of listView
        ...List.generate(itemlength, (index) => Text("itemWidget"))
      ],
    ),
  ),
);

但我会鼓励您检查CustomScrollView 。

Answer 2

将SingleChildScrollView作为脚手架的主体传递。 还推荐 ListView 的shrinkwrap: true ，这样它只占用所需的空间，这将避免无限高度错误。

所以而不是

...
Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        mainAxisSize: MainAxisSize.min,
        children: [
          Container(
...

做这个

...
Widget build(BuildContext context) 
    return Scaffold(
      body: SingleChildScrollView(
        child: Column(
            mainAxisSize: MainAxisSize.min,
            children: [
              Container(...

Answer 3

我推荐你使用 CustomScrollView。

试试这个：

CustomScrollView(
  slivers: [
    SliverFillRemaining(
      hasScrollBody: false,
      child: Column("""HERE PUT YOUR CODE""")
    )]
),

Answer 4

为了让SingleChildScrollView工作，应该定义其父级的高度。 您可以通过将SingleChildScrollView包装在具有定义高度的Container/SizedBox中，或者通过使用Expanded小部件包装它来实现这一点。