Flutter?UI如何實(shí)現(xiàn)側(cè)拉抽屜菜單

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

在移動(dòng)開(kāi)發(fā)中，我們可以通過(guò)底部導(dǎo)航欄、標(biāo)簽頁(yè)或是側(cè)邊抽屜菜單來(lái)實(shí)現(xiàn)導(dǎo)航。這是在小屏幕上可以充分利用空間。我們?cè)O(shè)計(jì)不僅要實(shí)用而且要有趣，這樣才算得上好的 UI 設(shè)計(jì)。這件我們?cè)?Scaffold 通常是上下結(jié)構(gòu)，頭部是標(biāo)題欄下面主界面。

@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 屬性方便我們定義側(cè)邊抽屜。

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

這樣便可以在 child 為側(cè)拉抽屜添加內(nèi)容，內(nèi)容是添加一個(gè)列表。DrawerHeader 添加標(biāo)題欄。然后 decoration 中添加背景顏色。然后通過(guò) ListTile 組件來(lái)添加一條一條內(nèi)容

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 事件來(lái)通過(guò) Navigator 返回到主界面。

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

完整代碼

import 'package:flutter/material.dart';
 
class DrawerApp extends StatelessWidget{
 
  final appTitle = "側(cè)滑抽屜";
 
  @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);
              },
            )
          ],
        ),
      ),
    );
  }
}

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