Flutter滚动约束插件constrained_scroll_view的使用

Flutter滚动约束插件constrained_scroll_view的使用

动机

每当屏幕大小发生变化（例如由于键盘或移动设备分辨率的变化）时，我们的内容应该动态地对这些变化做出反应，并且仍然对用户可见。我们如何实现这一点？最简单的解决方案可能是将内容包裹在SingleChildScrollView或ListView中，这会使子部件默认可滚动。但是，如果在垂直视图中内容的高度小于屏幕高度而在水平视图中大于屏幕高度时怎么办？你不会希望在垂直视图中使其可滚动。ConstrainedScrollView优雅地解决了这个问题。

开始使用

只需将你的Column小部件包裹在ConstrainedScrollView中即可。就是这样，它就可以工作了！

ConstrainedScrollView(
  child: Column(
    children: [
      // 在这里添加你的子部件
    ],
  ),
)

如果你想要在Column中使用Flexible或Expanded小部件，则需要设置flex属性为true。

ConstrainedScrollView(
  flex: true,
  child: Column(
    children: [
      // 在这里添加你的子部件
    ],
  ),
)

完整示例

以下是一个完整的示例，展示了如何使用ConstrainedScrollView：

import 'package:constrained_scroll_view/constrained_scroll_view.dart';
import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'ConstrainedScrollView Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const Home(),
    );
  }
}

class Home extends StatelessWidget {
  const Home({Key? key}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      // 改变屏幕方向到横向视图并观察内容是否变为可滚动。
      body: ConstrainedScrollView(
        // Column 小部件通常作为子部件使用。
        child: Column(
          children: [
            Container(
              color: Colors.blue,
              width: 100,
              height: 100,
            ),
            Container(
              color: Colors.red,
              width: 100,
              height: 100,
            ),
            Container(
              color: Colors.green,
              width: 100,
              height: 100,
            ),
            Container(
              color: Colors.yellow,
              width: 100,
              height: 100,
            ),
          ],
        ),
      ),
    );
  }
}

更多关于Flutter滚动约束插件constrained_scroll_view的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter滚动约束插件constrained_scroll_view的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


在Flutter中，ConstrainedScrollView 是一个非常有用的组件，它允许你在滚动视图上应用约束。这通常用于嵌套滚动场景，例如在一个 PageView 或 NestedScrollView 中嵌套一个可滚动的列表。下面是一个关于如何使用 ConstrainedScrollView 的代码示例。

示例场景

假设我们有一个 NestedScrollView，它包含一个头部和一个可滚动的列表。我们希望列表部分在滚动到底部时能够触发某些操作（例如加载更多数据），同时我们希望在头部固定的情况下，列表部分能够正常滚动。

代码示例

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('ConstrainedScrollView Example'),
        ),
        body: NestedScrollView(
          headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
            return <Widget>[
              SliverAppBar(
                title: Text('Header'),
                pinned: true,
                expandedHeight: 200,
                flexibleSpace: FlexibleSpaceBar(
                  collapseMode: CollapseMode.parallax,
                  background: Image.network(
                    'https://via.placeholder.com/1500x600',
                    fit: BoxFit.cover,
                  ),
                ),
              ),
            ];
          },
          body: Builder(
            builder: (BuildContext context) {
              return ConstrainedScrollView(
                constraints: BoxConstraints(
                  minHeight: 0.0,
                ),
                child: RefreshIndicator(
                  onRefresh: () async {
                    // Simulate a network fetch.
                    await Future.delayed(Duration(seconds: 2));
                    return;
                  },
                  child: ListView.builder(
                    itemCount: 50,
                    itemBuilder: (context, index) {
                      return ListTile(
                        title: Text('Item $index'),
                      );
                    },
                  ),
                ),
              );
            },
          ),
        ),
      ),
    );
  }
}

代码解释

  1. NestedScrollView:

    • headerSliverBuilder: 构建一个包含 SliverAppBar 的头部。SliverAppBar 被固定（pinned: true），并且有一个可展开的背景图片。
    • body: 使用 Builder 包裹 ConstrainedScrollView，以便在构建 ConstrainedScrollView 时能够访问 context。

  2. ConstrainedScrollView:

    • constraints: 应用滚动约束。在这个例子中，我们设置了 minHeight 为 0.0，这意味着滚动视图将至少占用 0 高度（实际上，它将根据内容自动调整高度）。
    • child: 包含一个 RefreshIndicator，它允许用户下拉刷新列表。内部是一个 ListView.builder，用于动态生成列表项。

注意

  • ConstrainedScrollView 本身不直接提供滚动功能，而是通过约束来控制其子组件的滚动行为。
  • 在嵌套滚动场景中，ConstrainedScrollView 可以帮助确保子滚动视图的行为符合预期，特别是在复杂的布局中。

这个示例展示了如何在 NestedScrollView 中使用 ConstrainedScrollView 来管理滚动约束。根据你的具体需求，你可能需要调整约束或添加更多功能。

回到顶部