告别低级滑动，使用 Flutter 轻松构建悬浮导航栏

Android

2024-02-09 00:29:32

使用 Flutter 构建带有固定头部的底部滑动页

简介

在移动应用开发中，底部滑动页是一种流行的交互模式，它允许用户在不同页面间切换，同时保持顶部导航栏的可见性。通过实现这一效果，您可以提升用户体验，赋予应用更现代、更时尚的外观。

Flutter 中构建底部滑动页相对简单，但如果您想实现更高级的功能，比如固定头部，操作可能会变得有些复杂。本文将深入探讨如何使用 Flutter 构建一个带有固定头部的底部滑动页，并提供详细的步骤和代码示例。

实现步骤

1. 创建新的 Flutter 项目

首先，使用以下命令通过 Flutter CLI 创建一个新的 Flutter 项目：

flutter create flutter_bottom_sheet_with_fixed_header

2. 添加依赖项

在 pubspec.yaml 文件中，添加以下依赖项：

dependencies:
  flutter:
    sdk: flutter

  # 添加 PageView 依赖项
  page_view: ^3.0.0

3. 创建 PageView

在 lib/main.dart 文件中，创建 PageView 来管理不同页面间的切换：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: PageView(
          controller: PageController(), // 设置页面控制器
          children: [
            // 添加不同的页面作为 PageView 的子项
            Page1(),
            Page2(),
            Page3(),
          ],
        ),
      ),
    );
  }
}

4. 创建固定头部

接下来，创建一个 CustomScrollView 来创建固定头部：

import 'package:flutter/material.dart';

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

  @override
  Widget build(BuildContext context) {
    return SliverAppBar(
      pinned: true, // 设置头部为固定
      expandedHeight: 100, // 设置头部高度
      backgroundColor: Colors.blue,
      flexibleSpace: FlexibleSpaceBar(
        title: Text('固定头部'), // 添加头部内容
      ),
    );
  }
}

5. 将固定头部添加到 PageView

将 CustomScrollView 添加到 PageView 中作为第一个子项：

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: PageView(
          controller: PageController(),
          children: [
            FixedHeader(), // 添加固定头部
            Page1(),
            Page2(),
            Page3(),
          ],
        ),
      ),
    );
  }
}