Flutter定義tabbar底部導航路由跳轉的方法

更新時間：2022年07月28日 15:04:54 作者：明知山_

這篇文章主要為大家詳細介紹了Flutter定義tabbar底部導航路由跳轉的方法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了Flutter定義tabbar底部導航路由跳轉的具體代碼，供大家參考，具體內容如下

效果展示

整體實現的目錄結構

第一步 把三個頁面放到tabs里 Category.dart || Home.dart || Setting.dart

在這里我只展示 Home.dart 另外兩個頁面相同

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 Text("我是首頁組件");
? }
}

在 Tabs.dart 里import 引入三個頁面

import 'package:flutter/material.dart';
import 'tabs/Home.dart';
import 'tabs/Category.dart';
import 'tabs/Setting.dart';

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

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

class _TabsState extends State<Tabs> {
? int _currentIndex = 0;
? // 把頁面存放到數組里
? List _pageList = [
? ? HomePage(),
? ? CategoryPage(),
? ? SettingPage(),
? ];
? @override
? Widget build(BuildContext context) {
? ? return Scaffold(
? ? ? appBar: AppBar(
? ? ? ? title: Text('首頁'),
? ? ? ),
? ? ? body: this._pageList[this._currentIndex],
? ? ? bottomNavigationBar: BottomNavigationBar(
? ? ? ? // 默認選中第幾項
? ? ? ? currentIndex: this._currentIndex,
? ? ? ? // 導航欄點擊獲取索引值
? ? ? ? onTap: (int index) {
? ? ? ? ? setState(() {
? ? ? ? ? ? this._currentIndex = index;
? ? ? ? ? });
? ? ? ? },
? ? ? ? iconSize: 30.0, //icon的大小
? ? ? ? fixedColor: Colors.red, //選中的顏色
? ? ? ? type: BottomNavigationBarType.fixed, //配置底部tabs可以有多個按鈕
? ? ? ? //定義導航欄的圖片+名稱
? ? ? ? items: [
? ? ? ? ? BottomNavigationBarItem(icon: Icon(Icons.home), title: Text("首頁")),
? ? ? ? ? BottomNavigationBarItem(
? ? ? ? ? ? ? icon: Icon(Icons.category), title: Text("分類")),
? ? ? ? ? BottomNavigationBarItem(
? ? ? ? ? ? ? icon: Icon(Icons.settings), title: Text("設置")),
? ? ? ? ],
? ? ? ),
? ? );
? }
}

main.dart

import 'package:flutter/material.dart'; //快捷方式:fim
import 'pages/Tabs.dart';

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

//自定義組件
class MyApp extends StatelessWidget {
? @override
? Widget build(BuildContext context) {
? ? // TODO: implement build
? ? return MaterialApp(
? ? ? home: Tabs(),
? ? ? theme: ThemeData(primarySwatch: Colors.deepOrange),
? ? ? debugShowCheckedModeBanner: false,
? ? );
? }
}

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: