Flutter 常用滚动组件使用场景

1. 使用 SingleChildScrollView

如果页面的内容较少并且你希望整体可滚动,可以使用 SingleChildScrollView 来包裹页面的所有内容。

示例:

dart 复制代码
SingleChildScrollView(
  child: Column(
    children: [
      Container(
        height: 200,
        color: Colors.blue,
        child: const Center(child: Text('部分内容')),
      ),
      Container(
        height: 200,
        color: Colors.green,
        child: const Center(child: Text('其他内容')),
      ),
      // 可以继续添加更多内容
    ],
  ),
)

2. 使用 ListView

如果你的内容是一个列表项,ListView 是最适合的滚动组件。ListView 会根据列表项的数量自动滚动,可以通过 ListView.builder 来动态构建列表项。

示例:

dart 复制代码
ListView(
  children: [
    Container(
      height: 200,
      color: Colors.blue,
      child: const Center(child: Text('部分内容')),
    ),
    Container(
      height: 200,
      color: Colors.green,
      child: const Center(child: Text('其他内容')),
    ),
    // 可以继续添加更多内容
  ],
)

3. 混合使用滚动组件

你可以根据页面布局需求,结合 SingleChildScrollViewListView 等进行嵌套使用。

示例:

dart 复制代码
SingleChildScrollView(
  child: Column(
    children: [
      Container(
        height: 200,
        color: Colors.blue,
        child: const Center(child: Text('顶部内容')),
      ),
      ListView.builder(
        shrinkWrap: true,  // 设置为 true 让 ListView 在嵌套滚动时不占据全部空间
        physics: NeverScrollableScrollPhysics(),  // 禁止内嵌的 ListView 滚动
        itemCount: 10,
        itemBuilder: (context, index) {
          return Container(
            height: 100,
            color: Colors.orange,
            child: Center(child: Text('列表项 $index')),
          );
        },
      ),
      Container(
        height: 200,
        color: Colors.green,
        child: const Center(child: Text('底部内容')),
      ),
    ],
  ),
)

4. 滚动时禁用顶部栏(SliverAppBar)

如果页面有一个动态的顶部栏(例如 SliverAppBar),可以通过使用 CustomScrollView 来实现与滚动内容的配合。

示例:

dart 复制代码
CustomScrollView(
  slivers: [
    SliverAppBar(
      expandedHeight: 200.0,
      floating: true,
      pinned: true,
      flexibleSpace: FlexibleSpaceBar(
        title: Text('标题'),
        background: Image.network('https://example.com/image.jpg', fit: BoxFit.cover),
      ),
    ),
    SliverList(
      delegate: SliverChildBuilderDelegate(
        (context, index) {
          return Container(
            height: 100,
            color: Colors.orange,
            child: Center(child: Text('列表项 $index')),
          );
        },
        childCount: 50,
      ),
    ),
  ],
)

小结:

  • SingleChildScrollView:适用于页面内容较少的场景。
  • ListView:适用于有多个列表项且需要滚动的场景。
  • CustomScrollView :适用于结合 SliverAppBar 或自定义滚动效果的场景。
相关推荐
l软件定制开发工作室18 小时前
Flutter系列教程之(5)——常用控件Widget的使用示例
flutter
leluckys18 小时前
flutter 专题 八十五 Flutter 应用调试
flutter
ClaNNEd@18 小时前
Flutter&JSON
flutter·json
阿长长啊1 天前
Flutter 介绍及安装使用
flutter
snail2012111 天前
Flutter_boost混编开发系统MethodChannel之坑
flutter
leluckys1 天前
flutter 专题 八十二 Flutter路由框架Fluro简介
开发语言·javascript·flutter
l软件定制开发工作室1 天前
Flutter系列教程之(6)——Tab导航与ListView使用
flutter
null_null9991 天前
flutter Running Gradle task ‘assembleDebug‘...
flutter
一人前行1 天前
Flutter_学习记录_各个屏幕的适配
学习·flutter
江上清风山间明月1 天前
一周掌握Flutter开发--3、布局与 UI 组件
flutter·column·listview·flex·gridview·row·layoutbuilder