flutter 列/SingleChildScrollView不滚动

iswrvxsc  于 2023-01-05  发布在  Flutter
关注(0)|答案(4)|浏览(497)

我正在学习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 Package 它,但它不起作用,使用shrinkWrap: true的ListView也给出了“ParentDataWidget的使用不正确”错误。
CommentBodyWidget有一个列表视图生成器。它可以自己滚动,但是上面的小部件没有沿着滚动。
我怎样才能显示整个页面并一起滚动,而不必将长帖子限制在一个受约束的容器中?请帮助。

6fe3ivhb

6fe3ivhb1#

可以将bodyColumnSingleChildScrollView打包,然后使用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

3zwtqj6y

3zwtqj6y2#

传递SingleChildScrollView作为您的scaffold的主体。另外,建议为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(...
zaq34kh6

zaq34kh63#

我建议您使用CustomScrollView。
试试这个:

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

5fjcxozz4#

为了使SingleChildScrollView正常工作,需要定义其父对象的高度,可以通过将SingleChildScrollView Package 在一个高度已定义的Container/SizedBox中,或者通过使用Expanded小部件 Package 来实现。

相关问题