【Flutter 程式設計入門實戰 30 天】Day 22:Drawer 抽屜頁面導航元件


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

哈囉~大家好,我是 KT ,今天實戰第二十二天,KT 將為大家來介紹,Drawer 抽屜頁面導航元件。

Drawer 抽屜頁面導航元件

可以從側邊欄彈出功能選單,也可以顯示用戶相關資訊,如:大頭照、用戶名稱和 mail等。

範例畫面

範例:三個頁面,透過 Drawer 抽屜選單互相切換

新增三個頁面

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

Drawer 抽屜選單導航頁(main.dart)

import 'package:flutter/material.dart';

import 'account.dart';
import 'chat.dart';
import 'home.dart';

void main() => runApp(
      new MaterialApp(
        home: new MyApp(),
      ),
    );

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  //目前選擇頁索引值
  int _currentIndex = 0; //預設值

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

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: AppBar(
        title: Text('HKT線上教室'),
      ),
      drawer: Drawer(
        child: ListView(
          children: <Widget>[
            //設定用户名稱
            UserAccountsDrawerHeader(
              accountName: new Text(
                "HKT線上教室",
              ),
              //設定Email
              accountEmail: new Text(
                "thishkt@gmail.com",
              ),
              //設定大頭照
              currentAccountPicture: new CircleAvatar(
                backgroundImage: new AssetImage("assets/images/logo.png"),
              ),
            ),
            //選單
            ListTile(
              leading: new CircleAvatar(child: Icon(Icons.chrome_reader_mode)),
              title: Text('從零開始學 Java 程式設計'),
              onTap: () {
                _onItemClick(0);
              },
            ),
            ListTile(
              leading: new CircleAvatar(child: Icon(Icons.code)),
              title: Text('從零開始學 Kotlin 程式設計'),
              onTap: () {
                _onItemClick(1);
              },
            ),
            ListTile(
              leading: new CircleAvatar(child: Icon(Icons.computer)),
              title: Text('從零開始學 Flutter 程式設計'),
              onTap: () {
                _onItemClick(2);
              },
            ),
          ],
        ),
      ),
      body: pages[_currentIndex],
    );
  }

  void _onItemClick(int index) {
    setState(() {
      _currentIndex = index;
      Navigator.of(context).pop();
    });
  }
}

執行畫面


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

參考資料

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

這個網誌中的熱門文章

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

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

nano 文字編輯器

Android Studio 歷代版本下載點

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