Flutter?UI如何實現側拉抽屜菜單

小編給大家分享一下Flutter UI如何實現側拉抽屜菜單，希望大家閱讀完這篇文章之后都有所收獲，下面讓我們一起去探討吧！

在移動開發中，我們可以通過底部導航欄、標簽頁或是側邊抽屜菜單來實現導航。這是在小屏幕上可以充分利用空間。我們設計不僅要實用而且要有趣，這樣才算得上好的 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);
              },
            )
          ],
        ),
      ),
    );
  }
}

看完了這篇文章，相信你對“Flutter UI如何實現側拉抽屜菜單”有了一定的了解，如果想了解更多相關知識，歡迎關注億速云行業資訊頻道，感謝各位的閱讀！