flutter常用组件

Container(盒容器)

@override
  Widget build(BuildContext context){
    return Container(
      decoration: new BoxDecoration(
        color:Colors.yellow
      ),
      child: Flex(
        direction: Axis.horizontal,
        children: [
        FlatButton(
          child: Text("按钮"),
          textColor: Colors.red,
          onPressed: (){
              dalog(context);
            },
        )
      ],),
    );
  }

主要是关注decoration (装饰) 可以设置container的属性，这里color指的是背景色

image.png

AlertDialog(提示框)

 @override
  Widget build(BuildContext context){
    return Container(
      child: FlatButton(
          child: Text("按钮"),
          textColor: Colors.red,
          onPressed: (){
              dalog(context);
            },
        )
    );
  }

void dalog(BuildContext context){
  showDialog(
    context: context,
    barrierDismissible:false,
    builder: (BuildContext context){
      return AlertDialog(
        title: Text("测试"),
        content: SingleChildScrollView(
          child: ListBody(children: [
            Text("中间内容"),
            Text("中间内容1")
          ],),
        ),
        actions: [
          FlatButton(
              child: Text("actions"),
              onPressed: (){
                Navigator.of(context).pop(); //关闭弹框9
              },
            )
        ],
      );
    }
  );
}

image.png

simpleDialog （简洁的弹框，多步骤弹框）

@override
  Widget build(BuildContext context){
    return Container(
      child: FlatButton(
          child: Text("按钮"),
          textColor: Colors.red,
          onPressed: (){
              simpleDialog(context);
            },
        )
    );
  }

enum Department{
  one,
  two,
  three
}

Future simpleDialog(BuildContext context) async{
    switch(await showDialog(
      context: context, 
      builder: (BuildContext context){
        return SimpleDialog(
            title: Text("simpletitle"),
            children: [
              SimpleDialogOption(
                  onPressed: (){
                    Navigator.pop(context, Department.one);
                  },
                  child: Text("one"),
              ),
              SimpleDialogOption(
                  onPressed: (){
                    Navigator.pop(context, Department.two);
                  },
                  child: Text("two"),
              ),
              SimpleDialogOption(
                  onPressed: (){
                    Navigator.pop(context, Department.three);
                  },
                  child: Text("three"),
              )
            ],
          );
      }
    )) {
      case Department.one:
        print("第一种情况");
        break;
      case Department.two:
        print("第二种情况");
        break;
      case Department.three:
        print("第三种情况");
        break;
    }
}

image.png

image.png

alertdialog会返回一个结果，这样可以通过switch或其他方法做多次弹框等其他操作

上拉菜单栏

showFLBottomSheet(
        context: context,
        builder: (BuildContext context) {
          return FLCupertinoActionSheet(
            cancelButton: CupertinoActionSheetAction(
              child: const Text(
                'Cancel',
                style: TextStyle(fontSize: 15),
              ),
              isDefaultAction: true,
              onPressed: () {
                Navigator.pop(context, 'Cancel');
              },
            ),
            child: contentIdList(),
          );
        }).then((value) { // then是选中后的结果
  });
  }

Widget contentIdList() {
    List data = [];
    listContentId.forEach((val) {
      if (val.contentId != null) {
        data.add(FLFlatButton(
          expanded: true,
          child: P(
            val.contentId,
            textAlign: TextAlign.center,
          ),
          onPressed: () => doSelectContentId(val.contentId),
        ));
      }
    });
    Widget rs = Container(
        child: SingleChildScrollView(
      child: Column(children: data),
    ));
    return rs;
  }

image.png