【Flutter 程式設計入門實戰 30 天】Day 21:TabBar 選項卡頁面導航元件


【Flutter 程式設計入門實戰 30 天】線上教學課程目錄 使用 Dart 程式語言,開發 Android 和 iOS APP 應用程式。

哈囉~大家好,我是 KT ,今天實戰第二十一天,KT 將為大家來介紹,TabBar 選項卡頁面導航元件。

TabBar 選項卡頁面導航元件

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

範例畫面

新增三個頁面

在 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("個人資料頁"),
    );
  }
}

TabBar 導航頁(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(new MyApp());
}

class MyApp extends StatelessWidget {
  final List<Tab> myTabs = <Tab>[
    Tab(text: '首頁'),
    Tab(text: '聊天室'),
    Tab(text: '個人資料'),
  ];

  final pages = [HomePage(), ChatPage(), AccountPage()];

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: DefaultTabController(
        length: myTabs.length, //選項卡頁數
        child: Scaffold(
          appBar: AppBar(
            title: Text("HKT線上教室"),
            bottom: TabBar(
              tabs: myTabs,
            ),
          ),
          body: TabBarView(
            children: <Widget>[HomePage(), ChatPage(), AccountPage()],
          ),
        ),
      ),
    );
  }
}

執行畫面

  • 首頁
  • 聊天室
  • 個人資料

那今天就介紹到這邊囉~
順帶一提,KT 線上教室,臉書粉絲團,會不定期發佈相關資訊,不想錯過最新資訊,不要忘記來按讚,加追蹤喔!也歡迎大家將這篇文章分享給更多人喔。
我們明天見囉!!!掰掰~

參考資料

HKT 線上教室
http://tw-hkt.blogspot.com/
Background vector created by freepik
https://www.freepik.com

這個網誌中的熱門文章

2023 最新入門零基礎 Kotlin教學【從零開始學 Kotlin 程式設計】Kotlin 教學課程目錄 (Android Kotlin, IntelliJ IDEA, Android Studio, Android APP 開發教學)

最新入門零基礎 Java 教學【從零開始學 Java 程式設計】Java教學課程目錄 (IntelliJ IDEA 開發教學)

Android Studio 歷代版本下載點

nano 文字編輯器

2022 最新入門零基礎 Flutter教學 【Flutter 程式設計入門實戰 30 天】Flutter 教學課程目錄 (IntelliJ IDEA 開發教學)