Flutter Drawer抽屜選單範例詳解

2022-03-23 13:03:15

本文範例為大家分享了Flutter Drawer抽屜選單範例程式碼，供大家參考，具體內容如下

一.Flutter Drawer元件簡介

1.原始碼檢視

const Drawer({
    Key? key,
    this.elevation = 16.0, //陰影效果大小
    this.child, //內容元素
    this.semanticLabel, //關閉/開啟抽屜時的通知資訊
  })

二.抽屜選單範例

1.選單項，使用 ListTile 實現

Expanded(
              child: ListView(
                children: <Widget>[
                  ListTile(
                    leading: const Icon(Icons.person),
                    title: const Text('Personal'),
                  ),
                  ListTile(
                    leading: const Icon(Icons.message),
                    title: const Text('information'),
                  ),
                  ListTile(
                    leading: const Icon(Icons.settings),
                    title: const Text('about'),
                  ),
                ],
              ),
),

2.底部導航欄，使用BottomNavigationBar實現

bottomNavigationBar: BottomNavigationBar(
        currentIndex: currentIndex,
        type: BottomNavigationBarType.fixed,
        unselectedItemColor: Colors.grey,
        selectedItemColor: Colors.blue,
        /*unselectedLabelStyle:TextStyle(
          color: Colors.black
        ),*/
        items: [
          BottomNavigationBarItem(
              icon: Icon(Icons.home),
              label: "首頁",
              //backgroundColor:Colors.blue
          ),
 
          BottomNavigationBarItem(
              icon: Icon(Icons.person),
              label: "通訊錄",
              //backgroundColor:Colors.blue
          ),
 
          BottomNavigationBarItem(
              icon: Icon(Icons.find_in_page),
              label: "發現",
              //backgroundColor:Colors.blue
          ),
 
          BottomNavigationBarItem(
              icon: Icon(Icons.flip_outlined),
              label: "我的",
              //backgroundColor:Colors.blue
          ),
        ],
 
        onTap: (index){
          setState(() {
            print("the index is :$index");
            currentIndex=index;
          });
        },
      ),

參考：flutter底部導航欄

3.懸浮按鈕，使用FloatingActionButton實現

floatingActionButton: FloatingActionButton( //懸浮按鈕
          child: Icon(Icons.add),
          onPressed:_onAddNum
      ),

三.Demo及實際效果

1.mydrawer.dart

import 'package:flutter/material.dart';
 
class MyDrawer extends StatelessWidget {
  const MyDrawer({
    Key? key,
  }) : super(key: key);
 
  @override
  Widget build(BuildContext context) {
    return Drawer(
      elevation: 30,
      child: MediaQuery.removePadding(
        context: context,
        //移除抽屜選單頂部預設的空白
        removeTop: true,
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
            Padding(
              padding: const EdgeInsets.only(top: 30.0),
              child: Row(
                children: <Widget>[
                  Padding(
                    padding: const EdgeInsets.symmetric(horizontal: 15.0),
                    child: ClipOval(
                      child: Image.asset(
                        "images/cc.png",
                        width: 60,
                      ),
                    ),
                  ),
                  Text(
                    "jon",
                    style: TextStyle(fontWeight: FontWeight.bold),
                  )
                ],
              ),
            ),
            Expanded(
              child: ListView(
                children: <Widget>[
                  ListTile(
                    leading: const Icon(Icons.person),
                    title: const Text('Personal'),
                  ),
                  ListTile(
                    leading: const Icon(Icons.message),
                    title: const Text('information'),
                  ),
                  ListTile(
                    leading: const Icon(Icons.settings),
                    title: const Text('about'),
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}

2.MainPage.dart

import 'package:flutter/material.dart';
import 'findpage.dart';
import 'mypage.dart';
import 'contactpage.dart';
import 'homepage.dart';
import 'mydrawer.dart';
 
class MainPage extends StatefulWidget{
  const MainPage({Key? key}) : super(key: key);
 
  @override
  State<StatefulWidget> createState()=>_MainPageState();
}
 
class _MainPageState extends State<MainPage>{
 
  var allPages=[HomePage(),ContactPage(),FindPage(),MyPage()];
  var currentIndex=0;
 
 
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar( //導航欄
        title: Text("App Name"),
        actions: <Widget>[ //導航欄右側分享選單
          IconButton(icon: Icon(Icons.share), onPressed: () {}),
        ],
      ),
      drawer: MyDrawer(), //選單抽屜
      body: allPages[currentIndex],
      backgroundColor: Colors.green,
      bottomNavigationBar: BottomNavigationBar(
        currentIndex: currentIndex,
        type: BottomNavigationBarType.fixed,
        unselectedItemColor: Colors.grey,
        selectedItemColor: Colors.blue,
        /*unselectedLabelStyle:TextStyle(
          color: Colors.black
        ),*/
        items: [
          BottomNavigationBarItem(
              icon: Icon(Icons.home),
              label: "首頁",
              //backgroundColor:Colors.blue
          ),
 
          BottomNavigationBarItem(
              icon: Icon(Icons.person),
              label: "通訊錄",
              //backgroundColor:Colors.blue
          ),
 
          BottomNavigationBarItem(
              icon: Icon(Icons.find_in_page),
              label: "發現",
              //backgroundColor:Colors.blue
          ),
 
          BottomNavigationBarItem(
              icon: Icon(Icons.flip_outlined),
              label: "我的",
              //backgroundColor:Colors.blue
          ),
        ],
 
        onTap: (index){
          setState(() {
            print("the index is :$index");
            currentIndex=index;
          });
        },
      ),
 
      floatingActionButton: FloatingActionButton( //懸浮按鈕
          child: Icon(Icons.add),
          onPressed:_onAddNum
      ),
    );
  }
  void _onAddNum(){
  }
}

3.效果

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援it145.com。

Flutter Drawer抽屜選單範例詳解

一.Flutter Drawer元件簡介

二.抽屜選單範例

三.Demo及實際效果

熱門文章