Flutter自定义导航栏插件super_cupertino_navigation_bar_for_my_self的使用

Flutter 自定义导航栏插件 super_cupertino_navigation_bar_for_my_self 的使用

引言

本教程将展示如何使用 super_cupertino_navigation_bar_for_my_self 插件来自定义导航栏。这个插件基于 super_cupertino_navigation_bar 进行了修改，以满足特定的需求。

使用示例

示例代码

首先，我们需要导入必要的库并创建一个自定义的导航栏。以下是一个完整的示例，展示了如何在 Flutter 应用程序中使用该插件。

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:super_cupertino_navigation_bar_for_my_self/super_cupertino_navigation_bar.dart'; // 导入自定义导航栏插件

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.dark(
        useMaterial3: false,
      ).copyWith(
        brightness: Brightness.dark,
        scaffoldBackgroundColor: const Color(0xff000000),
        cardColor: const Color(0xff1B1B1B),
        shadowColor: Colors.transparent,
        iconTheme: const IconThemeData(color: CupertinoColors.systemBlue),
        cardTheme: CardTheme(
          shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(15),
          ),
        ),
      ),
      title: 'Flutter Demo',
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
      debugShowCheckedModeBanner: false,
    );
  }
}

class MyHomePage extends StatefulWidget {
  final String title;

  MyHomePage({required this.title});

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: PreferredSize(
        preferredSize: Size.fromHeight(80.0), // 设置导航栏的高度
        child: SuperCupertinoNavigationBar(
          middle: Text(widget.title), // 设置中间标题
          trailing: IconButton(
            icon: Icon(Icons.notifications_none),
            onPressed: () {
              // 处理通知按钮点击事件
            },
          ),
          backgroundColor: CupertinoColors.black, // 设置背景颜色
          elevation: 0.0, // 去除阴影
        ),
      ),
      body: Center(
        child: Text('Hello, World!'),
      ),
    );
  }
}

代码解释

1. 导入库

   import 'package:flutter/cupertino.dart';
   import 'package:flutter/material.dart';
   import 'package:super_cupertino_navigation_bar_for_my_self/super_cupertino_navigation_bar.dart';

2. 创建主应用

   void main() {
     runApp(const MyApp());
   }
   
   class MyApp extends StatelessWidget {
     const MyApp({super.key});
   
     @override
     Widget build(BuildContext context) {
       return MaterialApp(
         theme: ThemeData.dark(
           useMaterial3: false,
         ).copyWith(
           brightness: Brightness.dark,
           scaffoldBackgroundColor: const Color(0xff000000),
           cardColor: const Color(0xff1B1B1B),
           shadowColor: Colors.transparent,
           iconTheme: const IconThemeData(color: CupertinoColors.systemBlue),
           cardTheme: CardTheme(
             shape: RoundedRectangleBorder(
               borderRadius: BorderRadius.circular(15),
             ),
           ),
         ),
         title: 'Flutter Demo',
         home: const MyHomePage(title: 'Flutter Demo Home Page'),
         debugShowCheckedModeBanner: false,
       );
     }
   }

3. 创建自定义页面

   class MyHomePage extends StatefulWidget {
     final String title;
   
     MyHomePage({required this.title});
   
     @override
     _MyHomePageState createState() => _MyHomePageState();
   }
   
   class _MyHomePageState extends State<MyHomePage> {
     @override
     Widget build(BuildContext context) {
       return Scaffold(
         appBar: PreferredSize(
           preferredSize: Size.fromHeight(80.0),
           child: SuperCupertinoNavigationBar(
             middle: Text(widget.title),
             trailing: IconButton(
               icon: Icon(Icons.notifications_none),
               onPressed: () {
                 // 处理通知按钮点击事件
               },
             ),
             backgroundColor: CupertinoColors.black,
             elevation: 0.0,
           ),
         ),
         body: Center(
           child: Text('Hello, World!'),
         ),
       );
     }
   }