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 包装它，但它不起作用，并且带有

shrinkWrap: true

的 ListView 也给出了“不正确使用 ParentDataWidget”错误。

CommentBodyWidget 有一个列表视图构建器。它会自行滚动，但上面的小部件不会随之滚动。

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

Answer 1

为了使

SingleChildScrollView

正常工作，应定义其父级的高度。 您可以通过将

SingleChildScrollView

包裹在具有定义高度的

Container/SizedBox

中，或者使用

Expanded

小部件包裹它来实现此目的。

Answer 2

您可以用

body

包裹

Column

SingleChildScrollView

，并使用

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 3

将

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 4

我推荐你使用CustomScrollView。

试试这个：

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

Answer 5

//好吧，问题是，你在这样的方法中使用 SingleChildScrollView

ScrollMe(){
  return SingleChildScrollView(
  // your code and many columns
 ),
}

//制作单独的StatelessWidget就像

class ScrollMe extends StatelessWidget {
  const ScrollMe({super.key});

  @override
  Widget build(BuildContext context) {
    return SingleChildScrollView(
      // your code and many columns
    );
  }
}

//然后你可以使用ScrollMe()，这对我来说是工作；p