iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 20
0
Mobile Development

Flutter 程式設計入門實戰 30 天系列 第 20

Day 20:BottomNavigationBar 底部頁面導航元件

  • 分享至 

  • xImage
  •  

2024 最新 Flutter 教學 - Flutter 終極指南: 連結
從零開始學 Dart 程式設計: 連結
Flutter 程式設計入門實戰 30 天: 連結


哈囉~大家好,我是 KT ,今天【iT邦幫忙鐵人賽】挑戰第二十天,KT 將為大家來介紹,BottomNavigationBar 底部頁面導航元件。

BottomNavigationBar 底部頁面導航元件

BottomNavigationBar 底部頁面導航元件,點擊下方按鈕,即可以快速切換頁面。

範例畫面

BottomNavigationBar ,常用的屬性

  • items ,底部頁面導航項目
  • currentIndex,當前索引值
  • onTap,按鈕點擊後觸發事件

範例:三個頁面,透過 BottomNavigationBar 互相切換

新增三個頁面

在 lib 資料夾下新增一個 page 資料夾,在 page 此資料夾,新增三個簡單頁面,畫面中間顯示該頁面名稱,無任何功能,單純呈現是否切換到該頁面。

首頁 (home_page.dart)

import 'package:flutter/material.dart';

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Text("首頁"),
    );
  }
}

聊天室頁 (chat_page.dart)

import 'package:flutter/material.dart';

class ChatPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Text("聊天室頁"),
    );
  }
}

個人資料頁 (account_page.dart)

import 'package:flutter/material.dart';

class AccountPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Text("個人資料頁"),
    );
  }
}

BottomNavigationBar 導航頁(main.dart)

import 'package:flutter/material.dart';
import 'package:demo_flutter/page/home_page.dart';
import 'package:demo_flutter/page/chat_page.dart';
import 'package:demo_flutter/page/account_page.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: BottomNavigationController(),
      ),
    );
  }
}

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

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

class _BottomNavigationControllerState
    extends State<BottomNavigationController> {
  //目前選擇頁索引值
  int _currentIndex = 0; //預設值
  final pages = [HomePage(), ChatPage(), AccountPage()];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('HKT線上教室'),
      ),
      body: pages[_currentIndex],
      bottomNavigationBar: BottomNavigationBar(
        items: <BottomNavigationBarItem>[
          BottomNavigationBarItem(icon: Icon(Icons.home), title: Text('首頁')),
          BottomNavigationBarItem(icon: Icon(Icons.chat), title: Text('聊天室')),
          BottomNavigationBarItem(
              icon: Icon(Icons.account_circle), title: Text('個人資料')),
        ],
        currentIndex: _currentIndex, //目前選擇頁索引值
        fixedColor: Colors.amber, //選擇頁顏色
        onTap: _onItemClick, //BottomNavigationBar 按下處理事件
      ),
    );
  }

  //BottomNavigationBar 按下處理事件,更新設定當下索引值
  void _onItemClick(int index) {
    setState(() {
      _currentIndex = index;
    });
  }
}

執行畫面

  • 首頁

  • 聊天室頁

  • 個人資料頁


那今天【iT邦幫忙鐵人賽】就介紹到這邊囉~

順帶一提,KT 線上教室,臉書粉絲團,會不定期發佈相關資訊,不想錯過最新資訊,不要忘記來按讚,加追蹤喔!也歡迎大家將這篇文章分享給更多人喔。

我們明天見囉!!!掰掰~

參考資料

HKT 線上教室
http://tw-hkt.blogspot.com/

Background vector created by freepik
https://www.freepik.com


上一篇
Day 19:對話框視窗
下一篇
Day 21:TabBar 選項卡頁面導航元件
系列文
Flutter 程式設計入門實戰 30 天30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言