Flutter可隐藏组件插件hideable_widget的使用

Flutter可隐藏组件插件hideable_widget的使用

插件简介

hideable_widget 是一个用于在Flutter中实现可隐藏组件的插件。通过这个插件，你可以轻松地将任何静态组件（如 AppBar、BottomAppBar 等）与滚动视图关联起来，并在用户滚动时自动隐藏或显示这些组件。下面是一个完整的示例demo，展示了如何使用 hideable_widget 插件。

示例效果

使用步骤

1. 创建滚动控制器 首先，你需要创建一个 ScrollController，它将用于控制滚动视图的行为。

   final scrollController = ScrollController();
   

2. 将滚动控制器应用到可滚动组件 接下来，将这个滚动控制器应用到你的可滚动组件（如 ListView）中。

   ListView(
     controller: scrollController,
     physics: const ClampingScrollPhysics(),
     children: [
       ...List.generate(
         50,
         (index) => ListTile(
           title: Text("List item ${index + 1}"),
         ),
       ).toList(),
       const SizedBox(height: 100),
     ],
   ),
   

3. 包裹静态组件并传递滚动控制器 然后，使用 HideableWidget 包裹你想要在滚动时隐藏的静态组件（如 AppBar 或 BottomAppBar），并将相同的滚动控制器传递给它。

   HideableWidget(
     scrollController: scrollController,
     child: BottomAppBar(
       // 你的 BottomAppBar 内容
     ),
   )
   

4. 完整示例代码 下面是一个完整的示例代码，展示了如何在一个页面中使用 hideable_widget 插件来隐藏 AppBar 和 BottomAppBar。

   import 'package:flutter/material.dart';
   import 'package:hideable_widget/hideable_widget.dart';
   
   void main() {
     runApp(const MyApp());
   }
   
   class MyApp extends StatelessWidget {
     const MyApp({super.key});
   
     @override
     Widget build(BuildContext context) {
       return MaterialApp(
         title: 'Hideable Widget',
         theme: ThemeData(
           colorScheme: ColorScheme.fromSeed(seedColor: Colors.orange),
           useMaterial3: true,
         ),
         home: const TestPage(),
       );
     }
   }
   
   class TestPage extends StatefulWidget {
     const TestPage({super.key});
   
     @override
     State<TestPage> createState() => _TestPageState();
   }
   
   class _TestPageState extends State<TestPage> {
     final scrollController = ScrollController();
   
     @override
     void dispose() {
       scrollController.dispose(); // 释放滚动控制器
       super.dispose();
     }
   
     @override
     Widget build(BuildContext context) {
       return Scaffold(
         appBar: PreferredSize(
           preferredSize: const Size(double.infinity, 56),
           child: HideableWidget(
             scrollController: scrollController, // 传递滚动控制器
             child: AppBar(
               title: const Text("Hideable Widget"),
               backgroundColor: Theme.of(context).colorScheme.inversePrimary,
             ),
           ),
         ),
         floatingActionButton: FloatingActionButton(
           backgroundColor: Theme.of(context).colorScheme.inversePrimary,
           onPressed: () {},
           tooltip: 'Create',
           child: const Icon(Icons.add),
         ),
         floatingActionButtonLocation: FloatingActionButtonLocation.endFloat,
         bottomNavigationBar: HideableWidget(
           scrollController: scrollController, // 传递滚动控制器
           child: BottomAppBar(
             color: Theme.of(context).colorScheme.inversePrimary,
             child: IconTheme(
               data: IconThemeData(color: Theme.of(context).colorScheme.onPrimary),
               child: Row(
                 mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                 children: <Widget>[
                   IconButton(
                     tooltip: 'Home',
                     icon: const Icon(Icons.home),
                     onPressed: () {},
                   ),
                   IconButton(
                     tooltip: 'Search',
                     icon: const Icon(Icons.search),
                     onPressed: () {},
                   ),
                   IconButton(
                     tooltip: 'Favorite',
                     icon: const Icon(Icons.favorite),
                     onPressed: () {},
                   ),
                 ],
               ),
             ),
           ),
         ),
         body: ListView(
           controller: scrollController, // 传递滚动控制器
           physics: const ClampingScrollPhysics(),
           children: [
             ...List.generate(
               50,
               (index) => ListTile(
                 title: Text("List item ${index + 1}"),
               ),
             ).toList(),
             const SizedBox(height: 100),
           ],
         ),
       );
     }
   }