日本免费高清视频-国产福利视频导航-黄色在线播放国产-天天操天天操天天操天天操|www.shdianci.com

學無先后，達者為師

網站首頁 編程語言 正文

Flutter?UI實現側拉抽屜菜單_Android

作者：當走的路甚遠 ? 更新時間： 2022-05-26 編程語言

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

原文鏈接：https://blog.csdn.net/shanghaibao123/article/details/107629748

欄目分類
最近更新