Flutter實現(xiàn)底部導航欄創(chuàng)建詳解

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

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

添加依賴項

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

運行下列代碼，添加依賴

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 來創(chuàng)建一個非常nice的底部導航欄。

如何使用

通常，「ConvexAppBar」可以通過設(shè)置它的 bottomNavigationBar 來與腳手架一起工作。ConvexAppBar具有兩個構(gòu)造函數(shù)，ConvexAppBar()將使用默認樣式來簡化選項卡的創(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)雅的過渡動畫
提供Hook API來重載一些內(nèi)部樣式
RTL布局支持

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

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

屬性

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

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

主題

AppBar默認使用內(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	角標構(gòu)造器builder, ConvexAppBar.badge會使用默認樣式

預覽圖

代碼

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

  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。在條目中，我們通過所有的屏幕，我們希望在我們的應(yīng)用程序中顯示。在 initialActiveIndexwe 中，我們傳遞已經(jīng)定義的變量 selectedpage，在 onTap 中，我們傳遞 index 并在 setState 中定義 setState () ，我們傳遞 selectedpage 相當于 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: '樂'),
        ],
        initialActiveIndex: selectedpage,
        onTap: (int index) {
          setState(() {
            selectedpage = index;
          });
        },
      ),
    );
  }
}

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

Home 頁

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('歡迎來到這兒'),
      ),
      body: Center(
        child: Text(
          '早起的年輕人',
          style: TextStyle(fontSize: 60, fontWeight: FontWeight.bold),
        ),
      ),
    );
  }
}

Message頁:

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('這是當前頁的AppBar'),
      ),
      body: Center(
        child: Text(
          '因為硬核，所以堅果！',
          style: TextStyle(fontSize: 60, fontWeight: FontWeight.bold),
        ),
      ),
    );
  }
}

Persion頁

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('公眾號'),
      ),
      body: Center(
        child: Text(
          '大前端之旅',
          style: TextStyle(fontSize: 60, fontWeight: FontWeight.bold),
        ),
      ),
    );
  }
}

Detail頁面

// 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)),
      ),
    );
  }
}

當我們運行應(yīng)用程序，我們應(yīng)該得到屏幕的輸出像下面的報錯信息。

這是一個