當前位置:網站首頁>利用FloatingActionButton實現底部凸起的導航欄
利用FloatingActionButton實現底部凸起的導航欄
2022-01-27 10:50:15 【s-010101】
FloatingActionButton學習
利用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
邊欄推薦
猜你喜歡
隨機推薦
- uniapp上傳圖片及組件傳值
- 瑞利年金險資金保障安全嗎?收益高不高啊?
- 華為手機USB連不上電腦的解决方法
- Flutter 2,移動金融應用開發
- 關於st25系列NFC標簽簡單介紹及st25TV系列用於門禁讀取時的注意事項總結
- 關於用ffmpeg轉手機視頻發現視頻長寬倒了的問題
- 函數 / 類模板--模板2
- 數組中的第k個最大的元素--優先級隊列、排序、堆、排序
- 單片機實例27——ADC0809A/D轉換器基本應用技術(硬件電路圖+匯編程序+C語言程序)
- Collection集合的學習
- 一場面試結束,某度員工從事Android 5年為何還是初級工程師?
- 3本書閱讀筆記【人月神話-Go語言實戰-研發能力持續成長路線】01
- PHP垃圾回收機制
- 【電子技術】什麼是LFSR?
- 死鎖?如何定比特到死鎖?如何修複死鎖?(jps和jstack兩個工具)
- 快樂寒假 22/01/20
- image
- 噴程序員?SURE?
- LDO分壓電阻計算小工具
- 面試之求一串字符串中每個字符的出現次數
- 【ISO15765_UDS&OBD診斷】-01-概述
- 【Mysql上分之路】第九篇:Mysql存儲引擎
- RHCE 第一次作業
- 2021.10.16我的第一篇博客:一切皆有可能!
- CTA-敏感行為-讀取IMEI
- 面試被問怎麼排查平時遇到的系統CPU飆高和頻繁GC,該怎麼回答?
- nuxt項目總結-綜合
- 自然語言處理學習筆記(一)
- C語言第一課
- 各比特大佬,Spark的重點難點系列暫時更新完畢
- 基於 esbuild 的 universal bundler 設計
- XCTFre逆向(四):insanity
- 理解什麼是真正的並發數
- JVM腦圖
- 【Pytorch(四)】學習如何使用 PyTorch 讀取並處理數據集
- 函數棧幀的創建與銷毀
- 構建神經網絡- 手寫字體識別案例
- 多模態生成模型ERNIE-VILG
- kotlin不容忽視的小細節
- 備戰一年,終於斬獲騰訊T3,我堅信成功是可以複制的