Flutter~自定义Dialog(基本的组件封装)

光棍节就得写个bug庆祝下!!!

写个自定义的Dialog,可以随意控制UI,同时封装一下,传值控制UI,开个方法回调,控制交互.

先上效果图!!!

再上代码

CustomDialog.dart

/*
* 输入框
* */

import 'package:flutter/material.dart';

class CustomDialog extends StatefulWidget {
  Function dismissCallback; // 取消回调
  Function okCallback; // 确认回调
  bool isNeedTag; // 外部传入的参数,控制显示slide还是input

  CustomDialog({
    Key key,
    this.dismissCallback,
    this.okCallback,
    this.isNeedTag,
  }) : super(key: key);
  @override
  _CustomDialogState createState() => _CustomDialogState();
}

class _CustomDialogState extends State<CustomDialog> {
  String commitStr;
  double slideValue = 0.0;

  /*
  * 取消按钮点击事件
  * */
  _dismissDialog() {
    if (widget.dismissCallback != null) {
      widget.dismissCallback();
    }
    Navigator.of(context).pop();
  }

  /*
  * 确定按钮点击事件
  * */
  _okCallback(String txt) {
    if (widget.okCallback != null) {
      widget.okCallback(txt);
    }
    Navigator.of(context).pop();
  }

  @override
  Widget build(BuildContext context) {
    return Material(
      type: MaterialType.transparency,
      child: Center(
        child: SizedBox(
          width: 240,
          height: 240,
          child: Container(
            decoration: BoxDecoration(
              color: Colors.cyanAccent,
              borderRadius: BorderRadius.vertical(
                top: Radius.circular(120.0),
              ),
            ),
            child: Column(
              children: <Widget>[
                widget.isNeedTag == true ? _topWidget() : _topWidget1(),
                Spacer(),
                _bottomWidget(),
              ],
            ),
          ),
        ),
      ),
    );
  }

  /*
  * 上方输入UI
  * */
  Widget _topWidget() {
    return Container(
      margin: EdgeInsets.only(top: 100),
      child: Container(
        child: TextField(
          onSubmitted: (e) {
            setState(() {
              commitStr = e;
            });
          },
          decoration: InputDecoration(
            border: InputBorder.none,
            hintText: "请输入字符",
          ),
        ),
      ),
    );
  }

  /*
  * 上方输入UI-1
  * */
  Widget _topWidget1() {
    return Container(
      margin: EdgeInsets.only(top: 100),
      child: Slider(
        value: slideValue,
        max: 100.0,
        min: 0.0,
        activeColor: Colors.blue,
        onChanged: (double val) {
          setState(() {
            slideValue = val;
            commitStr = val.toString();
          });
        },
      ),
    );
  }

  /*
  * 底部选择widget
  * */
  Widget _bottomWidget() {
    return Row(
      mainAxisAlignment: MainAxisAlignment.spaceAround,
      children: <Widget>[
        InkWell(
          onTap: () {
            _okCallback(commitStr);
          },
          child: Container(
            height: 50,
            width: 120,
            color: Colors.yellow[800],
            child: Center(
              child: Text(
                '确定',
                style: TextStyle(color: Colors.white),
              ),
            ),
          ),
        ),
        InkWell(
          onTap: () {
            _dismissDialog();
          },
          child: Container(
            height: 50,
            width: 120,
            color: Colors.red[800],
            child: Center(
              child: Text(
                '取消',
                style: TextStyle(color: Colors.white),
              ),
            ),
          ),
        ),
      ],
    );
  }
}

使用如下

main.dart

import 'package:flutter/material.dart';
import './custom_dialog.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('自定义dialog'),
      ),
      body: ListView(
        children: <Widget>[
          InkWell(
            onTap: () {
              showDialog(
                context: context,
                builder: (BuildContext context) {
                  return CustomDialog(
                    isNeedTag: true,
                    okCallback: (text) {
                      print(text);
                    },
                    dismissCallback: () {
                      print("input 取消了");
                    },
                  );
                },
              );
            },
            child: Text('第一个'),
          ),
          SizedBox(height: 20),
          InkWell(
            onTap: () {
              showDialog(
                context: context,
                builder: (BuildContext context) {
                  return CustomDialog(
                    isNeedTag: false,
                    okCallback: (text) {
                      print(text);
                    },
                    dismissCallback: () {
                      print("slide 取消了");
                    },
                  );
                },
              );
            },
            child: Text('第二个'),
          )
        ],
      ),
    );
  }
}

最后再讲点废话:

isNeedTag 就是用来给外部用来控制内部UI的值,这个简单控制下内部是显示输入框还是滑块
Function dismissCallback 和 Function okCallback 是Dialog内部行为传给外部的方法,控制交互.

ok.光棍节庆祝完毕.下班~~~

源码