Flutter實現底部導航欄創建詳解

Posted on by

ConvexBottomBar是一個底部導航欄組件，用於展現凸起的TAB效果，支持多種內置樣式與動畫交互。你可以在https://appbar.codemagic.app/上找到在線樣例。

添加依賴項

在你的項目中去 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 來創建一個非常nice的底部導航欄。

如何使用

通常， 「ConvexAppBar」 可以通過設置它的 bottomNavigationBar 來與腳手架一起工作。ConvexAppBar具有兩個構造函數，ConvexAppBar()將使用默認樣式來簡化選項卡的創建。

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'),
  )
);

功能

  • 提供多種內部樣式
  • 能夠更改AppBar的主題
  • 提供Builder API以自定義新樣式
  • 在AppBar上添加徽章
  • 支持優雅的過渡動畫
  • 提供Hook API來重載一些內部樣式
  • RTL佈局支持

關於支持的樣式，可以從這兒查看

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

屬性

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

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

主題

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

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

預覽圖

代碼

在 Convex_Bottom_Bar 演示中，首先，我們在這個類中創建一個名為 MyHomePage ()的有狀態類，我們創建一個值為 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。在這裡，我們創建 ConvexAppBar ()並傳遞 Items、 initialActiveIndex 和 onTap。在條目中，我們通過所有的屏幕，我們希望在我們的應用程序中顯示。在 initialActiveIndexwe 中，我們傳遞已經定義的變量 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;
          });
        },
      ),
    );
  }
}

如果我們創建不同的頁面, 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('掃碼關註'),
      ),
      body: Center(
        child: new Image(image: new NetworkImage(image)),
      ),
    );
  }
}

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

這是一個

Flutter web問題：Failed to load network image

我的解決辦法

flutter build web –release –web-renderer html

flutter run –web-renderer html

flutter run -d chrome –web-renderer html

參考資料

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

https://github.com/hacktons/convex_bottom_bar

以上就是Flutter實現底部導航欄創建詳解的詳細內容，更多關於Flutter底部導航欄創建的資料請關註WalkonNet其它相關文章！

推薦閱讀：