Flutter UI實現側拉抽屜選單

2022-03-23 16:00:08

在移動開發中，我們可以通過底部導航欄、分頁或是側邊抽屜選單來實現導航。這是在小螢幕上可以充分利用空間。我們設計不僅要實用而且要有趣，這樣才算得上好的 UI 設計。這件我們在 Scaffold 通常是上下結構，頭部是標題列下面主介面。

@override
Widget build(BuildContext context) {
  // TODO: implement build
  return Scaffold(
    appBar: AppBar(title: Text(title),),
    body: Center(child: Text('$title Demo'),),
  ),
 ),
);

Scaffold 除了 appBar 和 body 屬性以為還有 drawer 屬性方便我們定義側邊抽屜。

@override
Widget build(BuildContext context) {
  // TODO: implement build
  return Scaffold(
    appBar: AppBar(title: Text(title),),
    body: Center(child: Text('$title Demo'),),
    drawer: Drawer(
    )
    ),
  ),
);

這樣便可以在 child 為側拉抽屜新增內容，內容是新增一個列表。DrawerHeader 新增標題列。然後 decoration 中新增背景顏色。然後通過 ListTile 元件來新增一條一條內容

child: ListView(
      padding: EdgeInsets.zero,
      children: <Widget>[
        DrawerHeader(
          child: Text('$title Demo'),
          decoration: BoxDecoration(
            color: Colors.blue
          ),
        ),
        ListTile(
          title: Text("React"),
          onTap: (){
            Navigator.pop(context);
          },
        ),
        ListTile(
           title: Text("Vue"),
           onTap: (){
            Navigator.pop(context);
           },
        )
      ],
),

為 ListTile 新增 onTap 事件來通過 Navigator 返回到主介面。

ListTile(
      title: Text("Vue"),
      onTap: (){
        Navigator.pop(context);
      },
 )

完整程式碼

import 'package:flutter/material.dart';
 
class DrawerApp extends StatelessWidget{
 
  final appTitle = "側滑抽屜";
 
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return MaterialApp(
      title: appTitle,
      home: MyHomePage(title:appTitle),
    );
  }
  
}
 
class MyHomePage extends StatelessWidget{
  final String title;
  MyHomePage({Key key,this.title}):super(key:key);
 
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      appBar: AppBar(title: Text(title),),
      body: Center(child: Text('$title Demo'),),
      drawer: Drawer(
        child: ListView(
          padding: EdgeInsets.zero,
          children: <Widget>[
            DrawerHeader(
              child: Text('$title Demo'),
              decoration: BoxDecoration(
                color: Colors.blue
              ),
            ),
            ListTile(
              title: Text("React"),
              onTap: (){
                Navigator.pop(context);
              },
            ),
            ListTile(
              title: Text("Vue"),
              onTap: (){
                Navigator.pop(context);
              },
            )
          ],
        ),
      ),
    );
  }
}

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

Flutter UI實現側拉抽屜選單

熱門文章