Flutter 系列文章：Flutter Drawer 控制元件介紹

sometime-rock發表於2019-09-17
Flutter控制元件

一、控制元件介紹

一個邊緣側滑控制元件，從Scaffold 的邊緣水平滑動，以顯示應用程式中的導航連結。 抽屜通常與Scaffold.drawer屬性一起使用。抽屜的子項通常是ListView，其第一個子項是DrawerHeader ，它顯示有關當前使用者的狀態資訊。其餘的抽屜兒童往往與構建ListTile ，經常有結束AboutListTile。。

二、使用方法

 Drawer({
    Key key,
    double elevation: 16.0,//側邊欄抽屜相對於其父級放置的z座標
    Widget child,//側邊欄子控制元件
    String semanticLabel //可訪問性框架用於在開啟和關閉抽屜時通知螢幕轉換的對話方塊的語義標籤
})
  
複製程式碼

三、常用屬性

1.設定側邊欄的子控制元件，屜的子項通常是ListView，其第一個子項是DrawerHeader ，它顯示有關當前使用者的狀態資訊。其餘的抽屜兒童往往與構建ListTile ，經常有結束AboutListTile。。

  child: ListView(padding: const EdgeInsets.only(), children: <Widget>[
            //側邊欄子控制元件
            Container(
              height: 80,
            ),
            new ClipRect(
              child: new ListTile(
                leading: new CircleAvatar(child: new Text("A")),
                title: new Text('Drawer item A'),
                onTap: () => {},
              ),
            ),
            new ListTile(
              leading: new CircleAvatar(child: new Text("B")),
              title: new Text('Drawer item B'),
              subtitle: new Text("Drawer item B subtitle"),
              onTap: () => {},
            ),
            new AboutListTile(
              icon: new CircleAvatar(child: new Text("Ab")),
              child: new Text("About"),
              applicationName: "Test",
              applicationVersion: "1.0",
              applicationIcon: new Image.asset(
                "images/ymj_jiayou.gif",
                width: 64.0,
                height: 64.0,
              ),
              applicationLegalese: "applicationLegalese",
              aboutBoxChildren: <Widget>[
                new Text("BoxChildren"),
                new Text("box child 2")
              ],
            ),
          ]),
複製程式碼
  1. 設定側邊欄抽屜相對於其父級放置的z座標。。
  elevation: 10, //側邊欄抽屜相對於其父級放置的z座標。

複製程式碼

3、設定可訪問性框架用於在開啟和關閉抽屜時通知螢幕轉換的對話方塊的語義標籤,

 semanticLabel: '語義標籤'

複製程式碼

四、一個完整的例子

Flutter 系列文章：Flutter Drawer 控制元件介紹


import 'dart:ui';
import 'package:flutter/material.dart';

void main() => runApp(MaterialApp(
      title: 'MaterialApp', //用於為使用者識別應用程式的單行描述
      theme: ThemeData(
        //應用各種 UI 所使用的主題顏色
        primarySwatch: Colors.red,
      ),
      color: Colors.red, //作業系統介面中用於應用程式的主要顏色,在Android上，這是應用程式切換器中應用程式使用的顏色。
      home: MaterialAppDemo(), //MaterialApp 顯示的主介面
      routes: <String, WidgetBuilder>{
        // 應用的頂級導航表格，這個是多頁面應用用來控制頁面跳轉的，類似於網頁的網址
        "/MaterialApp": (BuildContext context) => TabBarView(),
      },
      initialRoute: '', //第一個顯示的路由名字，預設值為 Window.defaultRouteName
      navigatorObservers: List<NavigatorObserver>(),
      debugShowMaterialGrid: false, //是否顯示 材料設計 基礎佈局網格，用來除錯 UI 的工具
//      showPerformanceOverlay:
//          true, // 顯示效能標籤，https://flutter.io/debugging/#performanceoverlay
//      showSemanticsDebugger: true,
//      debugShowCheckedModeBanner: true,//效能除錯工具
    ));

class MaterialAppDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Material Appbar'),
      ),
      body: Center(
        child: Text('MaterialApp Demo'),
      ),
      drawer: Drawer(
          child: ListView(padding: const EdgeInsets.only(), children: <Widget>[
            //側邊欄子控制元件
            Container(
              height: 80,
            ),
            new ClipRect(
              child: new ListTile(
                leading: new CircleAvatar(child: new Text("A")),
                title: new Text('Drawer item A'),
                onTap: () => {},
              ),
            ),
            new ListTile(
              leading: new CircleAvatar(child: new Text("B")),
              title: new Text('Drawer item B'),
              subtitle: new Text("Drawer item B subtitle"),
              onTap: () => {},
            ),
            new AboutListTile(
              icon: new CircleAvatar(child: new Text("Ab")),
              child: new Text("About"),
              applicationName: "Test",
              applicationVersion: "1.0",
              applicationIcon: new Image.asset(
                "images/ymj_jiayou.gif",
                width: 64.0,
                height: 64.0,
              ),
              applicationLegalese: "applicationLegalese",
              aboutBoxChildren: <Widget>[
                new Text("BoxChildren"),
                new Text("box child 2")
              ],
            ),
          ]),
          elevation: 10, //側邊欄抽屜相對於其父級放置的z座標。
          semanticLabel: '語義標籤' //可訪問性框架用於在開啟和關閉抽屜時通知螢幕轉換的對話方塊的語義標籤,
          ),
    );
  }
}


複製程式碼

相關文章