Flutter学习(五) 基础控件 以及ios的Cupertino风格

这篇文章主要介绍 flutter中dialog的使用,和一些位置控件以及 ios风格的使用.其实ios风格的使用大部分都是在控件之前添加cupertino

Dialog

• CircularProgressIndicator 旋转的加载框 loading
• SimpleDialog 标题和两行信息展示

//dialog
 SimpleDialog(
            //标题
            title: Text('弹框'),
            children: <Widget>[
            //按钮
              SimpleDialogOption(
                child: Text('按钮1'),
                //按钮点击事件
                onPressed: () {},
              ),
              SimpleDialogOption(
                child: Text('按钮2'),
                onPressed: () {},
              ),
            ],
          ),

• AlertDialog 带确定 取消 操作的弹框

            AlertDialog(
                        //标题
                        title: Text('提示'),
                        //两行描述信息
                        content: SingleChildScrollView(
                          child: ListBody(
                            children: <Widget>[Text('删除'), Text('删除后不可恢复')],
                          ),
                        ),
                        //确定 取消 按钮
                        actions: <Widget>[
                          FlatButton(
                              onPressed: () {
                                Navigator.of(context).pop();
                              },
                              child: Text('确定')),
                          FlatButton(
                              onPressed: () {
                                Navigator.of(context).pop();
                              },
                              child: Text('取消')),
                        ],
                      );
                    })

• showDialog() 上边两种方式都是作为widget 方式去显示 showDialog()这个方法 可以将widget 弹框形式显示

       showDialog(
                    context: context,
                    builder: (BuildContext context) {
                      return AlertDialog(
                        title: Text('提示'),
                        content: SingleChildScrollView(
                          child: ListBody(
                            children: <Widget>[Text('删除'), Text('删除后不可恢复')],
                          ),
                        ),
                        actions: <Widget>[
                          FlatButton(
                              onPressed: () {
                                Navigator.of(context).pop();
                              },
                              child: Text('删除')),
                          FlatButton(
                              onPressed: () {
                                Navigator.of(context).pop();
                              },
                              child: Text('取消')),
                        ],
                      );
                    });

Table 表格

        Table(
            //边界线条
            border: TableBorder.all(color: Color(0xffff0000), width: 2),
             //一个表格的宽
             columnWidths:{0: FixedColumnWidth(100), 1: FixedColumnWidth(100)} ,
            //默认一个表格的宽
            defaultColumnWidth: FixedColumnWidth(60.0),
            children: [
              TableRow(children: [
                Text('姓名'),
                Text('年龄'),
                Text('性别'),
                Text('籍贯'),
              ]),
              TableRow(children: [
                Text('刘泽'),
                Text('28'),
                Text('男'),
                Text('河北'),
              ]),
              TableRow(children: [
                Text('刘泽'),
                Text('28'),
                Text('男'),
                Text('河北'),
              ]),
              TableRow(children: [
                Text('刘泽'),
                Text('28'),
                Text('男'),
                Text('河北'),
              ]),
            ],
          ),

Align 对子控件做对齐方式

Align(
        alignment: Alignment.centerRight,
        child: Container(
          height: 100,
          width: 100,
          color: Color(0xffff0000),
        ),

Stack 类似相对布局 和帧布局可以叠加控件

• Stack

Positioned 用来控制子控件在父控件中的位置

fit 在没有 Positioned的时候 会用这个属性控制字widget在 stack中 的位置

alignment 相对位置 中心点为原点的坐标轴

Stack(
         fit: StackFit.loose,
        alignment: Alignment(0, 0),
        children: <Widget>[
        Container(
          height: 100,
          width: 100,
          color: Color(0xff0000ff),
        ),
        Text('sdgdg'),
        Positioned(
            left: 50,
            top: 50,
            child: CircleAvatar(
              radius: 20,
              backgroundColor: Color(0xffff0000),
            ))
      ],
    )

• IndexedStack

用来显示第index 个child,下面案例有两个子widget 可以动态改变index 来确定显示哪一个child

 IndexedStack(
        index: _index,
        alignment: Alignment(1.2, -1.2),
        children: <Widget>[
          Container(
            height: 100,
            width: 100,
            color: Color(0xff0000ff),
          ),
          CircleAvatar(
            radius: 20,
            backgroundColor: Color(0xffff0000),
          ),
        ],
      )

Dismissible 侧滑控件

可以做侧滑删除功能

 Scaffold(
      body: ListView.builder(
        itemBuilder: (context, index) {
          var item = items[index];
          return Dismissible(
          //滑动方向
            direction: DismissDirection.endToStart,
            //滑动抬起监听
              onDismissed: (_) {
                items.removeAt(index);
              },
              //划出来的底层控件
              background: Container(
                color: Colors.red,
              ),
                //必须添加key
              key: Key('$item'),
              //上边覆盖的条目控件
              child: ListTile(
                title: Text('$item'),
              ));
        },
        itemCount: items.length,
      ),
    )

GestureDetector 手势触摸监听

控件还有好多属性 可以打开源码 找我们需要的属性

child: GestureDetector(
            //单击
          onTap: () {
            _scaffoldkey.currentState
                .showSnackBar(SnackBar(content: Text('点击')));
          },
          //双击
          onDoubleTap: () {
            _scaffoldkey.currentState
                .showSnackBar(SnackBar(content: Text('双击')));
          },
          //child
          child: Container(
            padding: EdgeInsets.all(10),
            decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(10),
              color: Colors.red,
            ),
            child: Text(
              '按钮',
              style: TextStyle(color: Colors.white),
            ),
          ),
        ),

IOS 的Cupertino 风格

ios 风格只需要在widget 之前添加cupertino 前缀就可以使用ios风格的控件,其他用法与Android 一致

• CupertinoButton()
• CupertinoAlertDialog()
• CupertinoActivityIndicator
• CupertinoTabScaffold
• CupertinoTabView

class _CupertinoWidgetState extends State<CupertinoWidget> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "iosdemo",
      home: CupertinoTabScaffold(
          tabBar: CupertinoTabBar(items: [
            BottomNavigationBarItem(
                icon: Icon(CupertinoIcons.add_circled), title: Text('添加')),
            BottomNavigationBarItem(
                icon: Icon(CupertinoIcons.book), title: Text('看书')),
          ]),
          tabBuilder: (context, index) {
            return CupertinoTabView(
              builder: (content) {
                switch (index) {
                  case 0:
                    return CupertinoAddWidget();
                    break;
                  case 1:
                    return CupertinoBookWidget();
                    break;
                }
              },
            );
          }),
    );
  }
}