Last Updated on 2021-05-18 by Clay
在使用 Flutter 開發 App 的時候,有時我們會希望能有個『側邊欄』來方便我們進行各式各樣的設定:
像這樣。
那我今天就簡單紀錄一下該怎麼使用這樣子的側邊欄。
若是想要參考官方的教學,可以參考這個網站: https://flutter.dev/docs/cookbook/design/drawer
Drawer
若要直接使用 Flutter 設定的側邊欄,我們只需要在 Scaffold 當中設定 drawer 即可。
設置的順序是使用一個 Column 元件建立縱向的元件排序(關於 Column 的教學可以參考我之前寫過的《Flutter 當中的 Column 跟 Row 兩種版面模式》這篇),先設定 "DrawerHeader",再設定各種想要的其他元件,比如按鈕、文字......。
import 'package:flutter/material.dart'; import 'package:flutter/rendering.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget{ @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( appBar: AppBar( backgroundColor: Colors.orange, title: Text('Drawer Test'), ), drawer: Drawer( child: Column( children: <Widget>[ DrawerHeader( decoration: BoxDecoration( color: Colors.orange, ), child: ListView( children: <Widget>[ Text('Personal Information', textAlign: TextAlign.center,), ], ), ), ListTile( title: Text('Name'), leading: Icon(Icons.people), ), Divider(), ListTile( title: Text('Age'), leading: Icon(Icons.calendar_view_day), ), Divider(), ], ) ), ), ); } }
Output:
點擊左上角的選項欄位:
下面其實就是相當單純的 ListTile 元件。(關於 ListView 這樣的元件可以參考我之前寫過的《在 Flutter 中使用 ListView 元件建立清單》)
自己實作側邊欄
不過,其實上面這種『點擊展開側邊欄』的設計並不是我想要的,我想的是打從一開始就位於側邊的各種選項。找了找沒有找到我想要的模組(也許 mobile_sidebar 有點類似我想要的界面),最後,決定自己使用 Container 來寫寫看。
import 'package:flutter/material.dart'; import 'package:flutter/rendering.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget{ @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( appBar: AppBar( backgroundColor: Colors.orange, title: Text('Drawer Test'), ), body: sideBar(), ), ); } } class sideBar extends StatelessWidget{ @override Widget build(BuildContext context) { return Container( width: MediaQuery.of(context).size.width/5*2, color: Colors.orange, child: Column( children: <Widget>[ Text('Personal Information', textAlign: TextAlign.center, style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold, color: Colors.white)), Divider(), ListTile( title: Text('Name'), leading: Icon(Icons.people), ), Divider(), ListTile( title: Text('Age'), leading: Icon(Icons.calendar_view_day), ), Divider(), ], ), ); } }
Output:
說實在的,這樣的側邊欄好像還行嘛。當然,我覺得要讓手機翻轉才常駐比較好。