flutter - 如何在SingleChildScrollView中实现非滚动 ListView

文章讲述了如何在Flutter的SingleChildScrollView中实现一个不可滚动的ListView,通过添加`NeverScrollablePhysics()`到ListView的物理属性。同时提到了相关的Dart编程资源和Flutter实战教程链接。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

flutter - 如何在SingleChildScrollView中实现非滚动 ListView

我试图在这里实现一个不可滚动的ListView构建器,但似乎找不到解决方法。原因是因为我希望所有内容都是可滚动的,并且我不想在可滚动的父级中拥有可滚动的小部件。

class _DashboardState extends State<Dashboard> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(title: Text('App Bar Here')),
        body: SingleChildScrollView(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Text('Hello World'),
              Container(
                child: ListView.builder(
                  itemBuilder: (context, index) {
                    return Card(
                      child: Padding(
                        padding: const EdgeInsets.all(16.0),
                        child: Column(
                          children: <Widget>[
                            Container(
                                color: Color(0xffaaaaaa),
                                height: 20,
                                child: Text('Jss One')),
                            Text(
                              'English',
                              style: TextStyle(fontSize: 20),
                            ),
                          ],
                        ),
                      ),
                    );
                  },
                  itemCount: 50,
                ),
              ),],),));
  }}

最佳答案

class _DashboardState extends State<Dashboard> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(title: Text('App Bar Here')),
        body: SingleChildScrollView(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Text('Hello World'),
              Container(
                child: ListView.builder(
                  physics: NeverScrollablePhysics() //add this line,
                  itemBuilder: (context, index) {
                    return Card(
                      child: Padding(
                        padding: const EdgeInsets.all(16.0),
                        child: Column(
                          children: <Widget>[
                            Container(
                                color: Color(0xffaaaaaa),
                                height: 20,
                                child: Text('Jss One')),
                            Text(
                              'English',
                              style: TextStyle(fontSize: 20),
                            ),
                          ],
                        ),
                      ),
                    );
                  },
                  itemCount: 50,
                ),
              ),],),));
  }}

将物理属性设置为NeverScrollablePhysics()以便不滚动lisview

最后

这里也为想要学习Flutter的朋友们准备了两份学习资料《Flutter Dart语言编程入门到精通》《Flutter实战》,从编程语言到项目实战,一条龙服务!!

《Flutter Dart 语言编程入门到精通》

  • 第一章 Dart语言基础

  • 第二章 Dart 异步编程
    在这里插入图片描述

  • 第三章 异步之 Stream 详解

  • 第四章 Dart标准输入输出流
    在这里插入图片描述

  • 第五章 Dart 网络编程

  • 第六章 Flutter 爬虫与服务端
    在这里插入图片描述

  • 第七章 Dart 的服务端开发

  • 第八章 Dart 调用C语言混合编程

  • 第九章 LuaDardo中Dart与Lua的相互调用
    在这里插入图片描述

《Flutter实战:第二版》

  • 第一章:起步
  • 第二章:第一个Flutter应用
  • 第三章:基础组件
  • 第四章:布局类组件
  • 第五章:容器类组件

在这里插入图片描述

  • 第六章:可滚动组件

  • 第七章:功能型组件

  • 第八章:事件处理与通知

  • 第九章:动画

  • 第十章:自定义组件
    在这里插入图片描述

  • 第十一章:文件操作与网络请求

  • 第十二章:Flutter扩展

  • 第十三章:国际化

  • 第十四章:Flutter核心原理

  • 第十五章:一个完整的Flutter应用
    在这里插入图片描述

Flutter 中,如果你想要在一个 `Scaffold` 或者 `SingleChildScrollView` 内部嵌套一个 `ListView` 并监听列表滚动到顶部或底部时,同时允许外部的 `SingleChildScrollView` 继续滚动,你可以通过监听 `ScrollController` 的状态来实现。首先,你需要为 `ListView` 和 `SingleChildScrollView` 分别设置控制器,并确保它们关联起来。 这里是一个简单的步骤说明: 1. **创建 `ScrollControllers`**: - 对于 `ListView`,创建一个 `ScrollController` 对象并将其绑定到 `ListView` 上。 ```dart final listController = ScrollController(); @override Widget build(BuildContext context) { return SingleChildScrollView( controller: _scrollController, // 这里的 _scrollController 可能是你已经有的,如果没有可以初始化它 child: ListView.builder(..., controller: listController), ); } ``` 2. **监听滚动事件**: - 当 `ListView` 的滚动位置改变时,检查是否达到了顶部或底部。例如,当 `listController.position.pixels == 0` 表示顶部,而 `listController.position.pixels >= listController.position.maxScrollExtent` 表示底部。 ```dart listController.addListener(() { if (listController.position.pixels == 0) { // 列表滚到了顶部 handleListTop(); } else if (listController.position.pixels >= listController.position.maxScrollExtent) { // 列表滚到了底部 handleListBottom(); } }); ``` 3. **处理动作**: - `handleListTop()` 和 `handleListBottom()` 函数里,你需要阻止 `listController` 的滚动,然后更新外部 `SingleChildScrollView` 的滚动位置,让它继续滚动: ```dart void handleListTop() { listController.stop(); // 停止 `listController` setState(() { // 更新外部 `_scrollController` 的位置 _scrollController.animateTo(0); }); } void handleListBottom() { listController.stop(); // 停止 `listController` setState(() { // 更新外部 `_scrollController` 的位置 _scrollController.animateTo(listController.position.maxScrollExtent); }); } ``` 4. **添加动画效果**(可选): - 如果你想给滚动过程加上平滑的动画效果,可以在 `animateTo()` 方法中传递参数,比如 `Duration(milliseconds: 500)`。 记得确保 `_scrollController` 是一个全局变量或者已经初始化过了,因为你在外部需要访问到它的状态。这只是一个基础的实现,实际应用中可能还需要考虑一些其他因素,如异常处理、动画缓存等。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值