Flutter實(shí)現(xiàn)底部導(dǎo)航欄創(chuàng)建詳解

更新時(shí)間：2022年01月17日 16:45:29 作者：大前端之旅

ConvexBottomBar是一個(gè)底部導(dǎo)航欄組件，用于展現(xiàn)凸起的TAB效果，支持多種內(nèi)置樣式與動(dòng)畫交互。本文將利用ConvexBottomBar創(chuàng)建漂亮的底部導(dǎo)航欄，感興趣的可以學(xué)習(xí)一下

添加依賴項(xiàng)

在你的項(xiàng)目中去 pubspec。添加依賴項(xiàng): 添加https://pub.dev/packages/convex_bottom_bar的最新版本。

運(yùn)行下列代碼，添加依賴

flutter pub add convex_bottom_bar

environment:
  sdk: '>=2.12.0 <3.0.0'
dependencies:
  flutter:
    sdk: flutter
  cupertino_icons: ^1.0.2
  convex_bottom_bar: ^3.0.0

我們使用convax_bottom_bar 來(lái)創(chuàng)建一個(gè)非常nice的底部導(dǎo)航欄。

如何使用

通常，「ConvexAppBar」可以通過(guò)設(shè)置它的 bottomNavigationBar 來(lái)與腳手架一起工作。ConvexAppBar具有兩個(gè)構(gòu)造函數(shù)，ConvexAppBar()將使用默認(rèn)樣式來(lái)簡(jiǎn)化選項(xiàng)卡的創(chuàng)建。

import 'package:convex_bottom_bar/convex_bottom_bar.dart';

Scaffold(
  bottomNavigationBar: ConvexAppBar(
    items: [
      TabItem(icon: Icons.home, title: 'Home'),
      TabItem(icon: Icons.map, title: 'Discovery'),
      TabItem(icon: Icons.add, title: 'Add'),
      TabItem(icon: Icons.message, title: 'Message'),
      TabItem(icon: Icons.people, title: 'Profile'),
    ],
    initialActiveIndex: 2,//optional, default as 0
    onTap: (int i) => print('click index=$i'),
  )
);

功能

提供多種內(nèi)部樣式
能夠更改AppBar的主題
提供Builder API以自定義新樣式
在AppBar上添加徽章
支持優(yōu)雅的過(guò)渡動(dòng)畫
提供Hook API來(lái)重載一些內(nèi)部樣式
RTL布局支持

關(guān)于支持的樣式，可以從這兒查看

https://pub.flutter-io.cn/packages/convex_bottom_bar

屬性

下面是「*Convex_Bottom_Bar*」的一些屬性:

「fixed」 (副標(biāo)題圖標(biāo)停留在中心)
「fixedCircle」 (相同，但在固定圖標(biāo)的所有邊上都有一個(gè)白色的圓圈)
「react」 (上標(biāo)圖標(biāo)取代點(diǎn)擊另一個(gè)圖標(biāo))
「reactCircle」 (與上標(biāo)圖標(biāo)中的白色圓圈相同)
「textIn」 (選定的離子出現(xiàn)相應(yīng)的標(biāo)題)
「titled」 (未選擇的圖標(biāo)是顯示其標(biāo)題的單個(gè)圖標(biāo))
「flip」 (點(diǎn)擊圖標(biāo)顯示一個(gè) flip 動(dòng)畫)
「custom」 (使用 ConvexBottomAppBar 構(gòu)建器自定義預(yù)定義的參數(shù))
「height」 (grabbing the appbar)
「top」 (grabbing the superscripted icon)
「curveSize」 (拉伸上標(biāo)圖標(biāo)的曲線)
「color」 (設(shè)置圖標(biāo)的顏色)
「backgroundColor」 (設(shè)置 appbar 背景顏色)
「gradient」 (使用漸變小部件設(shè)置 appbar 背景顏色)
「activeColor」 (設(shè)置圓形顏色)

主題

AppBar默認(rèn)使用內(nèi)置樣式，您可能需要為其設(shè)置主題。以下是一些支持的屬性：

Attributes	Description
backgroundColor	AppBar 背景
gradient	漸變屬性，可以覆蓋backgroundColor
height	AppBar 高度
color	icon/text 的顏色值
activeColor	icon/text 的選中態(tài)顏色值
curveSize	凸形大小
top	凸形到AppBar上邊緣的距離
style	支持的樣式: fixed, fixedCircle, react, reactCircle, ...
chipBuilder	角標(biāo)構(gòu)造器builder, ConvexAppBar.badge會(huì)使用默認(rèn)樣式

預(yù)覽圖

代碼

在 Convex_Bottom_Bar 演示中，首先，我們?cè)谶@個(gè)類中創(chuàng)建一個(gè)名為 MyHomePage ()的有狀態(tài)類，我們創(chuàng)建一個(gè)值為 0 的變量 selectedpage 類型的 integer pass。定義一個(gè)名為 pageList的列表，在這個(gè)列表中我們傳遞要添加到 bootom 導(dǎo)航欄中的所有頁(yè)面。

  int selectedpage = 0;
  final _pageList= [Home(), Message(), Persion(), Detail()];

在 BuildContext ()中，我們定義 Scaffold。

appBar: AppBar(
  centerTitle: true,
  title: Text('Convex Bottom Bar'),
),

首先在正文中傳遞 _pageno，其值為 selectedPage。使用 scaffold 屬性，我們使用 bottomNavigationBar。在這里，我們創(chuàng)建 ConvexAppBar ()并傳遞 Items、 initialActiveIndex 和 onTap。在條目中，我們通過(guò)所有的屏幕，我們希望在我們的應(yīng)用程序中顯示。在 initialActiveIndexwe 中，我們傳遞已經(jīng)定義的變量 selectedpage，在 onTap 中，我們傳遞 index 并在 setState 中定義 setState () ，我們傳遞 selectedpage 相當(dāng)于 index。

bottomNavigationBar: ConvexAppBar(
  items: [
    TabItem(icon: Icons._home_, title: 'Home'),
    TabItem(icon: Icons._favorite_, title: 'Favorite'),
    TabItem(icon: Icons._shopping_cart_, title: 'Cart'),
    TabItem(icon: Icons._person_, title: 'Profile'),
  ],
  initialActiveIndex: selectedpage,
  onTap: (int index){
      setState(() {
        selectedpage = index;
      });
  },
),

main.dart

import 'package:convex_bottom_bar/convex_bottom_bar.dart';
import 'package:flutter/material.dart';
import 'detail.dart';
import 'home.dart';
import 'message.dart';
import 'persion.dart';

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

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.teal,
      ),
      home: MyHomePage(),
    );
  }
}

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

class _MyHomePageState extends State<MyHomePage> {
  int selectedpage = 0;
  final _pageNo = [Home(), Message(), Persion(), Detail()];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        centerTitle: true,
        title: Text('Convex Bottom Bar'),
      ),
      body: _pageNo[selectedpage],
      bottomNavigationBar: ConvexAppBar(
           color: Colors.white,
        activeColor: Colors.red,
        backgroundColor: Colors.orange,
        items: [
          TabItem(icon: Icons.person, title: '新'),
          TabItem(icon: Icons.favorite, title: '年'),
          TabItem(icon: Icons.brush, title: '快'),
          TabItem(icon: Icons.car_rental, title: '樂(lè)'),
        ],
        initialActiveIndex: selectedpage,
        onTap: (int index) {
          setState(() {
            selectedpage = index;
          });
        },
      ),
    );
  }
}

如果我們創(chuàng)建不同的頁(yè)面, Home(), Favorite(), CartPage(), ProfilePage(). 在 Home 類中，我們定義一個(gè)帶有背景顏色的文本。

Home 頁(yè)

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

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

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

class _HomeState extends State<Home> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        centerTitle: true,
        title: Text('歡迎來(lái)到這兒'),
      ),
      body: Center(
        child: Text(
          '早起的年輕人',
          style: TextStyle(fontSize: 60, fontWeight: FontWeight.bold),
        ),
      ),
    );
  }
}

Message頁(yè):

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

class Message extends StatefulWidget {
  const Message({Key? key}) : super(key: key);

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

class _MessageState extends State<Message> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        centerTitle: true,
        title: Text('這是當(dāng)前頁(yè)的AppBar'),
      ),
      body: Center(
        child: Text(
          '因?yàn)橛埠?，所以?jiān)果！',
          style: TextStyle(fontSize: 60, fontWeight: FontWeight.bold),
        ),
      ),
    );
  }
}

Persion頁(yè)

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

class Persion extends StatefulWidget {
  const Persion({Key? key}) : super(key: key);

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

class _PersionState extends State<Persion> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(  appBar: AppBar(
        centerTitle: true,
        title: Text('公眾號(hào)'),
      ),
      body: Center(
        child: Text(
          '大前端之旅',
          style: TextStyle(fontSize: 60, fontWeight: FontWeight.bold),
        ),
      ),
    );
  }
}

Detail頁(yè)面

// ignore: file_names
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

class Detail extends StatefulWidget {
  const Detail({Key? key}) : super(key: key);

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

class _DetailState extends State<Detail> {
  String image =
      "https://luckly007.oss-cn-beijing.aliyuncs.com/image/image-20220114111115931.png";
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        centerTitle: true,
        title: Text('掃碼關(guān)注'),
      ),
      body: Center(
        child: new Image(image: new NetworkImage(image)),
      ),
    );
  }
}

當(dāng)我們運(yùn)行應(yīng)用程序，我們應(yīng)該得到屏幕的輸出像下面的報(bào)錯(cuò)信息。

這是一個(gè)