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;
                }
              },
            );
          }),
    );
  }
}
複製代碼