快捷導(dǎo)航

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

更新時間：2022年03月23日 11:44:22 作者：當(dāng)走的路甚遠(yuǎn)

這篇文章主要為大家詳細(xì)介紹了Flutter UI實(shí)現(xiàn)側(cè)拉抽屜菜單，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下

在移動開發(fā)中，我們可以通過底部導(dǎo)航欄、標(biāo)簽頁或是側(cè)邊抽屜菜單來實(shí)現(xiàn)導(dǎo)航。這是在小屏幕上可以充分利用空間。我們設(shè)計不僅要實(shí)用而且要有趣，這樣才算得上好的 UI 設(shè)計。這件我們在 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)容是添加一個列表。DrawerHeader 添加標(biāo)題欄。然后 decoration 中添加背景顏色。然后通過 ListTile 組件來添加一條一條內(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 事件來通過 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);
? ? ? ? ? ? ? },
? ? ? ? ? ? )
? ? ? ? ? ],
? ? ? ? ),
? ? ? ),
? ? );
? }
}

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: