Flutter进阶—质感设计之持久底部面板

前端之家收集整理的这篇文章主要介绍了Flutter进阶—质感设计之持久底部面板前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

持久性底部面板可以用于补充应用主要内容的信息,即使用户与应用程序的其他控件进行互动,也仍然可以看到持久的底部面板。可以使用Scaffold.showBottomSheet函数创建和显示持久性底部面板。

import 'package:flutter/material.dart';

class MyApp extends StatefulWidget {
  @override
  _MyApp createState() => new _MyApp();
}
class _MyApp extends State<MyApp> {
  /* GlobalKey:整个应用程序中唯一的键 ScaffoldState:Scaffold框架的状态 解释:_scaffoldKey的值是Scaffold框架状态的唯一键 */
  final GlobalKey<ScaffoldState> _scaffoldKey = new GlobalKey<ScaffoldState>();

  // VoidCallback:没有参数并且不返回数据的回调
  VoidCallback _showBottomSheetCallback;

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

  void _showBottomSheet() {
    setState(() {
      // 禁用按钮
      _showBottomSheetCallback = null;
    });
    /* currentState:获取具有此全局键的树中的控件状态 showBottomSheet:显示持久性的质感设计底部面板 解释:联系上文,_scaffoldKey是Scaffold框架状态的唯一键,因此代码大意为, 在Scaffold框架中显示持久性的质感设计底部面板 */
    _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(
            '这是一个持久性的底部面板,向下拖动即可将其关闭',textAlign: TextAlign.center,style: new TextStyle(
              color: themeData.accentColor,fontSize: 24.0
            )
          )
        )
      );
    })
    /* closed:当此对象控制的元素不再可见时完成 whenComplete:注册将在此未来完成时调用函数 解释:联系上文,closed控制的元素是新构建的质感设计底部面板,因此代码大意为, 注册底部面板不再可见时调用函数 */
    .closed.whenComplete((){
      // mounted:bool值,这个State对象当前是否在树中
      if (mounted) {
        setState(() {
          // 重新启用按钮
          _showBottomSheetCallback = _showBottomSheet;
        });
      }
    });
  }

  void _showMessage() {
    // showDialog<T>:显示应用程序当前内容上方的对话框
    showDialog<Null>(
      context: context,// AlertDialog:质感设计中的告警对话框
      child: new AlertDialog(
        // content:对话框的可选内容,以浅色字体显示在对话框的中心
        content: new Text('你点击了浮动按钮'),// actions:显示在对话框底部的可选操作
        actions: <Widget>[
          // FlatButton:质感设计中的平面按钮
          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()
  ));
}

这里写图片描述

猜你在找的Flutter相关文章