當前位置:網站首頁>利用FloatingActionButton實現底部凸起的導航欄

利用FloatingActionButton實現底部凸起的導航欄

2022-01-27 10:50:15 s-010101

利用FloatingActionButton實現底部凸起的導航欄

FloatingActionButton就是如圖樣式的組件,簡稱FAB
請添加圖片描述

屬性名稱 屬性值
child 子視圖,一般為 Icon,不推薦使用文字
tooltip FAB 被長按時顯示,也是無障礙功能
backgroundColor 背景顏色
elevation 未點擊的時候的陰影
hignlightElevation 點擊時陰影值,默認 12.0
onPressed 點擊事件回調
shape 可以定義 FAB 的形狀等
mini 是否是 mini 類型默認 false

接下來我們要利用FloatingActionButton來實現一個如圖樣式的底部凸起的導航欄
請添加圖片描述
請添加圖片描述
如圖可以看出,實際上就是將FloatingActionButton放在了我們導航欄中間的比特置
准備的五個頁面

CategoryPage.dart

// ignore_for_file: prefer_const_constructors_in_immutables, avoid_unnecessary_containers, prefer_const_constructors, prefer_const_literals_to_create_immutables

import 'package:flutter/material.dart';

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

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

class _CategoryPageState extends State<CategoryPage> {
    
  @override
  Widget build(BuildContext context) {
    
    return DefaultTabController(
      length: 2,
      child: Scaffold(
        appBar: AppBar(
          title: Row(
            children: [
              Expanded(child: TabBar(
                isScrollable: true,
              tabs: [         
              Tab(text: "熱門"),
              Tab(text: "切換")
              ],
              )
            )
            ],
            ),
          // bottom: TabBar(
          // tabs: [
          // Tab(text: "熱門"),
          // Tab(text: "切換")
          // ],
          // ),
        ),
        body: TabBarView(
          children: [
            ListView(
              children: [
                ListTile(
                  title: Text("第一個Tab"),
                ),
                ListTile(
                  title: Text("第一個Tab"),
                )
              ],
            ),
            ListView(
              children: [
                ListTile(
                  title: Text("第二個Tab"),
                ),
                ListTile(
                  title: Text("第二個Tab"),
                )
              ],
            )
          ],
          
          ),
      ),
    );
  }
}

EmailPage.dart

// ignore_for_file: avoid_unnecessary_containers, prefer_const_constructors, prefer_const_constructors_in_immutables

import 'package:flutter/material.dart';

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

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

class _EmailPageState extends State<EmailPage> {
    
  @override
  Widget build(BuildContext context) {
    
    return Container(
      child: Text("這是郵件頁面"),
    );
  }
}

HomePage.dart

// ignore_for_file: prefer_const_constructors_in_immutables, prefer_const_constructors

import 'package:flutter/material.dart';

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

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

class _HomePageState extends State<HomePage> {
    
  @override
  Widget build(BuildContext context) {
    
    return Column(
      children: [
        ElevatedButton(
      onPressed: (){
    
        Navigator.pushNamed(context, '/appbar');
      }, 
      child: Text("點擊轉跳"),
      ),
      ElevatedButton(
      onPressed: (){
    
        Navigator.pushNamed(context, '/tabBarController');
      }, 
      child: Text("點擊轉跳TabBarController"),
      ),
      ElevatedButton(
      onPressed: (){
    
        Navigator.pushNamed(context, '/tabBarController');
      }, 
      child: Text("點擊轉跳TabBarController"),
      )
      ],
    );
  }
}

SettingPage.dart

// ignore_for_file: prefer_const_literals_to_create_immutables

import 'package:flutter/material.dart';

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

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

class _SettingPageState extends State<SettingPage> {
    
  @override
  Widget build(BuildContext context) {
    
    return ListView(
      children: [
        ListTile(
          title: Text("我是設置頁面"),
        )
      ],
    );
  }
}

AddPage.dart(這個頁面對應的導航按鈕會被FloatingActionButton遮住),給FloatingActionButton設置點擊事件改變頁面也可以達到頁面切換的效果

// ignore_for_file: avoid_unnecessary_containers, prefer_const_constructors

import 'package:flutter/material.dart';

class AddPage extends StatelessWidget {
    
  const AddPage({
    Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    
    return Container(
      child: Text("這是添加頁面"),
    );
  }
}

Tabs.dart

// ignore_for_file: prefer_final_fields, deprecated_member_use, prefer_const_literals_to_create_immutables, prefer_const_constructors

import 'package:flutter/material.dart';
import 'package:flutterapp/pages/User.dart';
import 'package:flutterapp/pages/tabs/add.dart';
import 'tabs/Category.dart';
import 'tabs/Email.dart';
import 'tabs/Home.dart';
import 'tabs/Setting.dart';
import '../pages/User.dart';

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

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

class _TabsState extends State<Tabs> {
    
  int currentIndex = 0;
  List _pageList = [
    HomePage(),
    CategoryPage(),
    AddPage(),
    SettingPage(),
    EmailPage()
  ];
  @override
  Widget build(BuildContext context) {
    
    return Scaffold(
      appBar: AppBar(
        title: const Text('Flutter Demo'),
      ),
      floatingActionButton: Container(
        height: 70,
        width: 70,
        padding: EdgeInsets.all(10),
        margin: EdgeInsets.only(top: 30),
        decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(35),
            color: Color.fromARGB(255, 250, 250, 250)),
        child: FloatingActionButton(
          onPressed: () {
    
            setState(() {
    
              currentIndex = 2;
            });
          },
          child: Icon(Icons.add),
          backgroundColor: currentIndex==2?Colors.yellow:Colors.blue,
        ),
      ),
      floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
      drawer: Drawer(
        child: Column(
          children: [
            Row(
              children: [
                Expanded(
                    child: UserAccountsDrawerHeader(
                  accountEmail: Text("[email protected]"),
                  accountName: Text("sky"),
                  currentAccountPicture: CircleAvatar(
                      backgroundImage: NetworkImage(
                          "https://cdn.stocksnap.io/img-thumbs/960w/goose-flock_7EARMYLNXB.jpg")),
                  decoration: BoxDecoration(
                    image: DecorationImage(
                        image: NetworkImage(
                            "https://cdn.stocksnap.io/img-thumbs/960w/ice-nature_PHKM6CXBLQ.jpg"),
                        fit: BoxFit.cover),
                  ),
                  otherAccountsPictures: [
                    Image.network(
                        "https://cdn.stocksnap.io/img-thumbs/960w/flower-bloom_NZWKWLNPYX.jpg"),
                    Image.network(
                        "https://cdn.stocksnap.io/img-thumbs/960w/flower-bloom_KAKMFZ02RH.jpg"),
                  ],
                ))
              ],
            ),
            ListTile(
              leading: CircleAvatar(child: Icon(Icons.home)),
              title: Text("我的空間"),
            ),
            //設置分割線
            Divider(),
            ListTile(
              leading: CircleAvatar(child: Icon(Icons.people)),
              title: Text("用戶中心"),
              onTap: () {
    
                Navigator.of(context).pop();
                Navigator.of(context)
                    .push(MaterialPageRoute(builder: (BuildContext context) {
    
                  return UserPage();
                }));
              },
            ),
            Divider(),
            ListTile(
              leading: CircleAvatar(child: Icon(Icons.settings)),
              title: Text("設置中心"),
            )
          ],
        ),
      ),
      endDrawer: Drawer(
        child: Text("右側邊欄"),
      ),
      body: _pageList[currentIndex],
      bottomNavigationBar: BottomNavigationBar(
        type: BottomNavigationBarType.fixed,
        currentIndex: currentIndex,
        onTap: (int index) {
    
          setState(() {
    
            currentIndex = index;
          });
        },
        items: [
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
            label: "首頁",
          ),
          BottomNavigationBarItem(icon: Icon(Icons.category), label: "分類"),
          BottomNavigationBarItem(icon: Icon(Icons.add), label: "添加"),
          BottomNavigationBarItem(icon: Icon(Icons.mail), label: "郵件"),
          BottomNavigationBarItem(icon: Icon(Icons.settings), label: "設置"),
        ],
      ),
    );
  }
}

把相關代碼再擺出來方便查看

/*按鈕擺放的比特置和APPBar同級,因為不能設置floatingActionButton大小, 因此在外面嵌套一個Container來設置大小,我們也可以通過margin: EdgeInsets.only(top: 30), 改變來只遮住圖案不遮住文字(我們這裏把文字圖案都遮住了)*/
 floatingActionButton: Container(
        height: 70,
        width: 70,
        padding: EdgeInsets.all(10),
        margin: EdgeInsets.only(top: 30),
        //把Container設置為圓形
        decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(35),
            color: Color.fromARGB(255, 250, 250, 250)),
        child: FloatingActionButton(
          onPressed: () {
    
            setState(() {
    
              currentIndex = 2;
            });
          },
          child: Icon(Icons.add),
          //點擊時改變按鈕顏色
          backgroundColor: currentIndex==2?Colors.yellow:Colors.blue,
        ),
      ),
      //設置floatingActionButton比特置在底部中間
      floatingActionButtonLocation:  FloatingActionButtonLocation.centerDocked,

在這裏插入圖片描述
在這裏插入圖片描述

版權聲明
本文為[s-010101]所創,轉載請帶上原文鏈接,感謝
https://cht.chowdera.com/2022/01/202201271050152705.html

隨機推薦