Flutter質(zhì)感設計之持久底部面板

更新時間：2018年08月23日 10:00:05 作者：何小有

這篇文章主要為大家詳細介紹了Flutter質(zhì)感設計之持久底部面板，具有一定的參考價值，感興趣的小伙伴們可以參考一下

持久性底部面板可以用于補充應用主要內(nèi)容的信息，即使用戶與應用程序的其他控件進行互動，也仍然可以看到持久的底部面板?？梢允褂肧caffold.showBottomSheet函數(shù)創(chuàng)建和顯示持久性底部面板。

import 'package:flutter/material.dart';

class MyApp extends StatefulWidget {
 @override
 _MyApp createState() => new _MyApp();
}
class _MyApp extends State<MyApp> {
 /**
 *GlobalKey：整個應用程序中唯一的鍵
 ScaffoldState：Scaffold框架的狀態(tài)
 解釋：_scaffoldKey的值是Scaffold框架狀態(tài)的唯一鍵
 */
 final GlobalKey<ScaffoldState> _scaffoldKey = new GlobalKey<ScaffoldState>();

 // VoidCallback：沒有參數(shù)并且不返回數(shù)據(jù)的回調(diào)
 VoidCallback _showBottomSheetCallback;

 @override
 void initState() {
 super.initState();
 _showBottomSheetCallback = _showBottomSheet;
 }

 void _showBottomSheet() {
 setState(() {
  // 禁用按鈕
  _showBottomSheetCallback = null;
 });
 /**
  *currentState：獲取具有此全局鍵的樹中的控件狀態(tài)
  showBottomSheet：顯示持久性的質(zhì)感設計底部面板
  解釋：聯(lián)系上文，_scaffoldKey是Scaffold框架狀態(tài)的唯一鍵，因此代碼大意為，
   在Scaffold框架中顯示持久性的質(zhì)感設計底部面板
  */
 _scaffoldKey.currentState.showBottomSheet<Null>((BuildContext context){
  final ThemeData themeData = Theme.of(context);
  return new Container(
  decoration: new BoxDecoration(
   border: new Border(top: new BorderSide(color: themeData.disabledColor))
  ),
  child: new Padding(
   padding: const EdgeInsets.all(32.0),
   child: new Text(
   '這是一個持久性的底部面板，向下拖動即可將其關(guān)閉',
   textAlign: TextAlign.center,
   style: new TextStyle(
    color: themeData.accentColor,
    fontSize: 24.0
   )
   )
  )
  );
 })
 /**
  *closed：當此對象控制的元素不再可見時完成
  whenComplete：注冊將在此未來完成時調(diào)用的函數(shù)
  解釋：聯(lián)系上文，closed控制的元素是新構(gòu)建的質(zhì)感設計底部面板，因此代碼大意為，
   注冊底部面板不再可見時調(diào)用的函數(shù)
  */
 .closed.whenComplete((){
  // mounted：bool值，這個State對象當前是否在樹中
  if (mounted) {
  setState(() {
   // 重新啟用按鈕
   _showBottomSheetCallback = _showBottomSheet;
  });
  }
 });
 }

 void _showMessage() {
 // showDialog<T>：顯示應用程序當前內(nèi)容上方的對話框
 showDialog<Null>(
  context: context,
  // AlertDialog：質(zhì)感設計中的告警對話框
  child: new AlertDialog(
  // content：對話框的可選內(nèi)容，以淺色字體顯示在對話框的中心
  content: new Text('你點擊了浮動按鈕'),
  // actions：顯示在對話框底部的可選操作
  actions: <Widget>[
   // FlatButton：質(zhì)感設計中的平面按鈕
   new FlatButton(
   onPressed: () { Navigator.pop(context); },
   child: new Text('確定')
   )
  ]
  ),
 );
 }
 @override
 Widget build(BuildContext context) {
 return new Scaffold(
  key: _scaffoldKey,
  appBar: new AppBar(
  title: new Text('底部面板')
  ),
  floatingActionButton: new FloatingActionButton(
  onPressed: _showMessage,
  backgroundColor: Colors.redAccent[200],
  child: new Icon(Icons.add)
  ),
  body: new Center(
  child: new RaisedButton(
   onPressed: _showBottomSheetCallback,
   child: new Text('顯示底部面板')
  )
  )
 );
 }
}

void main() {
 runApp(new MaterialApp(
 title: 'Flutter Demo',
 home: new MyApp()
 ));
}