在半小时内搞定 Flutter 导航栏上下联动！

前端

2024-02-15 03:11:40

前言

在 Flutter 应用中，导航栏是一个至关重要的 UI 组件。它允许用户在应用的不同页面之间轻松导航。在许多情况下，我们希望导航栏随着用户滚动页面而上下联动，以提供无缝的用户体验。

在半小时内封装上下联动

在 Flutter 中，实现导航栏上下联动功能非常简单。以下是如何在半小时内完成：

创建自定义 ScrollController

首先，创建一个自定义 ScrollController，它将用于监听用户滚动页面时的偏移量。
```
ScrollController _scrollController = ScrollController();
```
在 build() 方法中监听 ScrollController

在 build() 方法中，使用 AnimatedBuilder 监听 ScrollController 的偏移量。这将允许我们在偏移量发生变化时更新导航栏的外观。
```
AnimatedBuilder(
    animation: _scrollController,
    builder: (context, child) {
        // 在这里更新导航栏的外观
    },
)
```
更新导航栏的外观

在 AnimatedBuilder 中，我们可以使用当前偏移量更新导航栏的外观。例如，我们可以改变导航栏的高度或颜色。
```
double offset = _scrollController.offset;
double height = offset > 50.0 ? 0.0 : 56.0;
double opacity = offset > 50.0 ? 0.0 : 1.0;
```
将 ScrollController 添加到 Scaffold

最后，将 ScrollController 添加到 Scaffold 中，以使其可以监听页面的滚动。
```
Scaffold(
    body: ListView(
        controller: _scrollController,
        // ...
    ),
)
```

代码示例

以下是完整代码示例：

import 'package:flutter/material.dart';

class MyHomePage extends StatefulWidget {
    @override
    _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
    ScrollController _scrollController = ScrollController();

    @override
    Widget build(BuildContext context) {
        return Scaffold(
            body: AnimatedBuilder(
                animation: _scrollController,
                builder: (context, child) {
                    double offset = _scrollController.offset;
                    double height = offset > 50.0 ? 0.0 : 56.0;
                    double opacity = offset > 50.0 ? 0.0 : 1.0;
                    return AppBar(
                        title: Text('Flutter'),
                        backgroundColor: Colors.blue,
                        elevation: 0.0,
                        actions: [
                            IconButton(
                                icon: Icon(Icons.search),
                                onPressed: () {},
                            ),
                        ],
                    );
                },
            ),
            body: ListView(
                controller: _scrollController,
                children: [
                    // ...
                ],
            ),
        );
    }
}