Flutter 滚动视图答案

【问题标题】：Flutter Scroll ViewFlutter 滚动视图
【发布时间】：2021-02-05 00:01:17
【问题描述】：

我在使我的网络应用程序的一部分可滚动时遇到问题。我尝试了多种解决方案，但都没有奏效。有什么想法吗？

Flexible(
          flex: 3,
          child: Align(
            alignment: Alignment.topRight,
            child: Padding(
              padding: const EdgeInsets.fromLTRB(20, 20, 0, 0),
              child: Column(
                children: [
                  Align(
                    alignment: Alignment.topLeft,
                    child: Text(
                        'Stories',
                        style: TextStyle(
                            color: Palette.white,
                            fontWeight: FontWeight.bold,
                            fontSize: 16
                        )
                    ),
                  ),
                  Stories(
                    currentUser: currentUser,
                    stories: stories,
                  ),
                  Padding(
                    padding: const EdgeInsets.fromLTRB(0, 20, 0, 20),
                    child: RecommendedCards(),
                  ),
                  Expanded(
                    child: Align(
                      alignment: Alignment.centerLeft,
                      child: RecommendedFollowingList(
                          users: recommendedFollow
                      ),
                    )
                  ),
                  PolicyView()
                ],
              ),
            ),
          ),
        ),

这是我无法滚动的代码。当我尝试添加 SingleChildScrollView 时，我不断收到错误消息。就是这么说的

在此 RenderBox 上调用了 hitTest() 方法：_RenderScrollSemantics#0e2ee relayoutBoundary=up10：需要合成创建者：_ScrollSemantics-[GlobalKey#1a713] ← Scrollable ← PrimaryScrollController ← SingleChildScrollView ← Align ← Flexible ← Row ← DesktopScreen ← LayoutBuilder ← Responsive ← _BodyBuilder ← MediaQuery ← ⋯ parentData: offset=Offset(0.0, 0.0) （可以使用大小）约束：BoxConstraints(0.0

下面是视图的完整代码。

class DesktopScreen extends StatelessWidget {
  final TrackingScrollController scrollController;

  const DesktopScreen({
    Key key,
    @required this.scrollController,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Row(
      children: [
        Flexible(
          flex: 3,
          child: Align(
            alignment: Alignment.centerLeft,
            child: Padding(
              padding: const EdgeInsets.all(12.0),
              child: ContactsList(users: onlineUsers,
              ),
            ),
          ),
        ),
        Container(
          width: 600.0,
          child: CustomScrollView(
            controller: scrollController,
            slivers: [
              SliverToBoxAdapter(
                child: Padding(
                  padding: const EdgeInsets.fromLTRB(0, 20, 0, 0),
                  child: CreatePostContainer(currentUser: currentUser),
                ),
              ),
              SliverList(
                delegate: SliverChildBuilderDelegate(
                      (context, index) {
                    final Post post = posts[index];
                    return PostContainer(post: post);
                  },
                  childCount: posts.length,
                ),
              ),
            ],
          ),
        ),
        Flexible(
          flex: 3,
          child: Align(
            alignment: Alignment.topRight,
            child: SingleChildScrollView(
              child: Padding(
                padding: const EdgeInsets.fromLTRB(20, 20, 0, 0),
                child: Column(
                  children: [
                    Align(
                      alignment: Alignment.topLeft,
                      child: Text(
                          'Stories',
                          style: TextStyle(
                              color: Palette.white,
                              fontWeight: FontWeight.bold,
                              fontSize: 16
                          )
                      ),
                    ),
                    Stories(
                      currentUser: currentUser,
                      stories: stories,
                    ),
                    Padding(
                      padding: const EdgeInsets.fromLTRB(0, 20, 0, 20),
                      child: RecommendedCards(),
                    ),
                    Expanded(
                      child: Align(
                        alignment: Alignment.centerLeft,
                        child: RecommendedFollowingList(
                            users: recommendedFollow
                        ),
                      )
                    ),
                    PolicyView()
                  ],
                ),
              ),
            ),
          ),
        ),
      ],
    );
  }
}

【问题讨论】：

标签： flutter web flutter-layout flutter-web

【解决方案1】：

很简单，用 SingleChildScrollview 包裹你的主部件。

SingleChildScrollView(
child: Padding(
                  padding: const EdgeInsets.fromLTRB(20, 20, 0, 0),
                  child: Column(
                    children: [
                      Align(
                        alignment: Alignment.topLeft,
                        child: Text(
                            'Stories',
                            style: TextStyle(
                                color: Palette.white,
                                fontWeight: FontWeight.bold,
                                fontSize: 16
                            )
                        ),
                      ),
                      Stories(
                        currentUser: currentUser,
                        stories: stories,
                      ),
                      Padding(
                        padding: const EdgeInsets.fromLTRB(0, 20, 0, 20),
                        child: RecommendedCards(),
                      ),
                      Expanded(
                        child: Align(
                          alignment: Alignment.centerLeft,
                          child: RecommendedFollowingList(
                              users: recommendedFollow
                          ),
                        )
                      ),
                      PolicyView()
                    ],
                  ),
                ),
              )

【讨论】：

我还更新了帖子以更清楚地了解我遇到的问题

【解决方案2】：

您可以使用 SingleChildScrollView` 包装您的小部件。

一个可以滚动单个小部件的框。

【讨论】：

我收到一个错误。 [ERROR:flutter/lib/ui/ui_dart_state.cc(177)] Unhandled Exception: Cannot hit test a render box with no size.
我还更新了帖子以更清楚地了解我遇到的问题