dart 由于展开，页面未完全滚动

o2g1uqev 于 2023-03-21 发布在其他

关注(0)|答案(2)|浏览(107)

当我删除SingleChildScrollView并使用属性physics: const NeverScrollableScrollPhysics(),代码工作正常，滚动工作，但通过这样做，我的滚动只适用于这个小部件NewsItem，这是在页面的结尾，滚动实际上是只适用于NewsItem，而不是整个页面，这是我想要实现的.
下面是代码，

body: SingleChildScrollView(
        child: Padding(
          padding: const EdgeInsets.symmetric(horizontal: 18.0),
          child: Column(
            children: [
            // .... Some Widgets that take the 70% of the screen 
              Expanded(
                // height: 500,
                child: ListView.builder(
                  physics: const NeverScrollableScrollPhysics(),
                  scrollDirection: Axis.vertical,
                  itemCount: 5,
                  itemBuilder: (ctx, idx) {
                    return const NewsItem(
                      image:
                          'https://media.giphy.com/media/fTn01fiFdTd5pL60ln/giphy.gif',
                      headline: "Joe was attacked again! Lmaooooo",
                      author: 'Jack Williams',
                    );
                  },
                ),
              ),
            ],
          ),
        ),
      ),

通过用Expanded小部件 Package NewsItem，没有留下滚动的空间，除非我用SizedBox替换它，但它只允许我向下滚动整个页面，在那里我看到3个NewsItem，而不是5个。

dart

来源：https://stackoverflow.com/questions/75782195/page-is-not-scrolling-fully-because-of-expanded

2条答案

按热度按时间

xqk2d5yq1#

通过使用spread操作符...添加生成的小部件列表，可以简化操作：

body: Padding(
  padding: const EdgeInsets.symmetric(horizontal: 18.0),
  child: ListView(
    children: [
      // .... Some Widgets that take the 70% of the screen
      // Use the spread operator to add a generated list of NewsItems with length 5
      ...List<Widget>.generate(
        5,
        (index) {
          // [index] is the position in the generated list (from 0 up to 4 in this case)
          return const NewsItem(
            image: 'https://media.giphy.com/media/fTn01fiFdTd5pL60ln/giphy.gif',
            headline: 'Joe was attacked again! Lmaooooo',
            author: 'Jack Williams',
          );
        },
      ),
    ],
  ),
),

赞(0）回复(0）举报 2023-03-21

ix0qys7i2#

您可以简单地将您想要的列表视图中的项目添加到列中，在所有其他小部件（占据屏幕的70%）之后。

final newsItems = [1,2,3,4,5]; // Just an example list

SingleChildScrollView(
        child: Padding(
          padding: const EdgeInsets.symmetric(horizontal: 18.0),
          child: Column(
            children: [
            // .... Some Widgets that take the 70% of the screen
            ...newsItems.map(item => const NewsItem(
                      image:
                          'https://media.giphy.com/media/fTn01fiFdTd5pL60ln/giphy.gif',
                      headline: "Joe was attacked again! Lmaooooo",
                      author: 'Jack Williams',
                    );
                ).toList(),
            ],
          ),
        ),
      ),

newsItems就是您想要显示的新闻项的列表。

赞(0）回复(0）举报 2023-03-21

我来回答

dart 由于展开，页面未完全滚动

2条答案

相关问题

热门标签

最新问答