flutter學習之基礎組件（八）

本節主要記錄三方庫輪播圖的使用和Dialog相關組件，以及自定義dialog

一、輪播圖

如果您使用的是Flutter2.2.0以及Flutter2.2.0之后的版本請使用flutter_swiper_null_safety，
如果您使用的是Flutter2.2.0之前的版本請使用flutter_swiper，
具體使用檔案請參考flutter_swiper
flutter_swiper_null_safety和flutter_swiper用法完全一樣
flutter_swiper：
地址：https://pub.flutter-io.cn/packages/flutter_swiper
flutter_swiper_null_safety：
地址：https://pub.flutter-io.cn/packages/flutter_swiper_null_safety

1.引導頁輪播

class SplashContent extends StatefulWidget {
  const SplashContent({Key? key}) : super(key: key);

  @override
  _SplashContentState createState() => _SplashContentState();
}

class _SplashContentState extends State<SplashContent> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Swiper(
        itemBuilder: (BuildContext context, int index) {
          return new Image.network(
            listData[index]["imageUrl"],
            fit: BoxFit.fill,
          );
        },
        itemCount: listData.length,
        pagination: new SwiperPagination(),
        control: new SwiperControl(),
      ),
    );
  }
}

2.Banner輪播

class BannerContent extends StatefulWidget {
  const BannerContent({Key? key}) : super(key: key);

  @override
  _BannerContentState createState() => _BannerContentState();
}

class _BannerContentState extends State<BannerContent> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Banner輪播"),
      ),
      body: Column(
        children: [
          //在Column中不能直接添加Swiper 需要在外層包一個Container組件
          Container(
            width: double.infinity,
            child: AspectRatio(
              aspectRatio: 16 / 9,
              child: Swiper(
                itemBuilder: (BuildContext context, int index) {
                  return new Image.network(
                    listData[index]["imageUrl"],
                    fit: BoxFit.fill,
                  );
                },
                itemCount: listData.length,
                pagination: new SwiperPagination(),
                loop: false,
                index: 2,
                autoplay: true,
                //自動輪播
                duration: 1000,
                //   control: new SwiperControl(),
              ),
            ),
          ),
          SizedBox(
            height: 20,
          ),
          Row(
            children: [Text("我的是文本 哈哈哈")],
          )
        ],
      ),
    );
  }
}

3.卡片輪播

class CardContent extends StatefulWidget {
  const CardContent({Key? key}) : super(key: key);

  @override
  _CardContentState createState() => _CardContentState();
}

class _CardContentState extends State<CardContent> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Swiper(
        itemBuilder: (BuildContext context, int index) {
          return new Image.network(
            listData[index]["imageUrl"],
            fit: BoxFit.fill,
          );
        },
        itemCount: listData.length,
        itemWidth: 300.0,
        itemHeight: 400.0,
        layout: SwiperLayout.TINDER,
      ),
    );
  }
}

4.其他輪播

class OtherContent extends StatefulWidget {
  const OtherContent({Key? key}) : super(key: key);

  @override
  _OtherContentState createState() => _OtherContentState();
}

class _OtherContentState extends State<OtherContent> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Swiper(
          layout: SwiperLayout.CUSTOM,
          customLayoutOption: new CustomLayoutOption(
              startIndex: -1,
              stateCount: 3
          ).addRotate([
            -45.0/180,
            0.0,
            45.0/180
          ]).addTranslate([
            new Offset(-370.0, -40.0),
            new Offset(0.0, 0.0),
            new Offset(370.0, -40.0)
          ]),
          itemWidth: 300.0,
          itemHeight: 200.0,
          itemBuilder: (context, index) {
            return new Container(
       //       color: Colors.grey,
              child: new Center(
                child: Image.network(
                  listData[index]["imageUrl"],
                  fit: BoxFit.cover,
                ),
              ),
            );
          },
          itemCount: listData.length),
    );
  }
}

5.使用資料

List listData = [
  {
    "title": 'Candy Shop',
    "author": 'Mohamed Chahin',
    "imageUrl": 'https://img1.baidu.com/it/u=3487414028,2932761123&fm=26&fmt=auto&gp=0.jpg',
    "description":
        'Flutter is Google’s mobile UI framework for crafting high-quality native experiences on iOS and Android in record time. Flutter works with existing',
  },
  {
    "title": 'Childhood in a picture',
    "author": 'Google',
    "imageUrl": 'https://c-ssl.duitang.com/uploads/item/201511/19/20151119134615_U2FJK.thumb.1000_0.jpeg',
    "description":
        'Flutter is Google’s mobile UI framework for crafting high-quality native experiences on iOS and Android in record time. Flutter works with existing',
  },
  {
    "title": 'Alibaba Shop',
    "author": 'Alibaba',
    "imageUrl": 'https://c-ssl.duitang.com/uploads/item/201511/19/20151119134556_QtJAy.thumb.1000_0.jpeg',
    "description":
        'Dart is a client-optimized language for fast apps on any platform... Dart is a client-optimized language for fast apps on any platform Optimizedfor',
  },
  {
    "title": 'Candy Shop',
    "author": 'Mohamed Chahin',
    "imageUrl": 'https://c-ssl.duitang.com/uploads/item/201511/19/20151119134519_QduTJ.thumb.1000_0.jpeg',
    "description":
        'Dart is a client-optimized language for fast apps on any platform... Dart is a client-optimized language for fast apps on any platform Optimizedfor',
  },
  {
    "title": 'Tornado',
    "author": 'Mohamed Chahin',
    "imageUrl": 'https://c-ssl.duitang.com/uploads/item/201511/19/20151119134502_PYSRn.thumb.1000_0.jpeg',
    "description":
        'Flutter is Google’s mobile UI framework for crafting high-quality native experiences on iOS and Android in record time. Flutter works with existing',
  },
  {
    "title": 'Undo',
    "author": 'Mohamed Chahin',
    "imageUrl": 'https://c-ssl.duitang.com/uploads/item/201511/19/20151119134337_Pd5BA.thumb.1000_0.jpeg',
    "description":
        'Flutter is Google’s mobile UI framework for crafting high-quality native experiences on iOS and Android in record time. Flutter works with existing',
  },
  {
    "title": 'white-dragon',
    "author": 'Mohamed Chahin',
    "imageUrl": 'https://c-ssl.duitang.com/uploads/item/201511/19/20151119134402_RCdAm.thumb.1000_0.jpeg',
    "description":
        'Dart is a client-optimized language for fast apps on any platform... Dart is a client-optimized language for fast apps on any platform Optimizedfor',
  }
];

二、彈窗Dialog組件

dialog有一下幾種：
普通dialog：AlertDialog
選擇框dialog：SimpleDialog
底部彈窗dialog:showModalBottomSheet
Toast提示：三方庫實作
自定義dialog

所有的彈窗設定上barrierDismissible:false,這個屬性，點擊彈窗外邊彈窗不會消失

1.AlertDialog

  _alertDialog() async {
    var result = await showDialog(
        barrierDismissible:false,  //表示點擊灰色背景的時候是否消失彈出框，建議彈出框的時候加上此屬性
        context: context,
        builder: (context) {
          return AlertDialog(
            title: Text("我是AlertDialog"),
            content: Text("確定要取消嗎？"),
            actions: [
              OutlinedButton(
                  onPressed: () {
                    Navigator.of(context).pop("取消");
                  },
                  child: Text("取消")),
              ElevatedButton(
                  onPressed: () {
                    Navigator.of(context).pop("確定");
                  },
                  child: Text("確定"))
            ],
          );
        });
    showToast(result);
  }在這里插入代碼片

2.SimpleDialog

  _simoleDialog() async {
    var result = await showDialog(
        context: context,
        builder: (context) {
          return SimpleDialog(
            title: Text("我是SimpleDialog"),
            children: [
              SimpleDialogOption(
                child: Text("選擇框1"),
                onPressed: () {
                  Navigator.of(context).pop("選擇框1");
                },
              ),
              Divider(),
              SimpleDialogOption(
                child: Text("選擇框2"),
                onPressed: () {
                  Navigator.of(context).pop("選擇框2");
                },
              ),
              Divider(),
              SimpleDialogOption(
                child: Text("選擇框3"),
                onPressed: () {
                  Navigator.of(context).pop("選擇框3");
                },
              ),
              Divider(),
              SimpleDialogOption(
                child: Text("選擇框4"),
                onPressed: () {
                  Navigator.of(context).pop("選擇框4");
                },
              ),
            ],
          );
        });
    showToast(result);
  }

2.showModalBottomSheet

 _ModalBottomSheet() async {
    var result = await showModalBottomSheet(
        context: context,
        builder: (context) {
          return Container(
            height: 200,
            alignment: Alignment.center,
            child: Column(
              mainAxisSize: MainAxisSize.min,
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                ListTile(
                  title: Text("賬號密碼登錄"),
                  leading: Icon(Icons.account_box_rounded),
                  onTap: () {
                    Navigator.of(context).pop("賬號密碼登錄");
                  },
                ),
                ListTile(
                  title: Text("手機號登錄"),
                  leading: Icon(Icons.phone_android),
                  onTap: () {
                    Navigator.of(context).pop("手機號登錄");
                  },
                ),
                ListTile(
                  title: Text("人臉識別登錄"),
                  leading: Icon(Icons.account_box_outlined),
                  onTap: () {
                    Navigator.of(context).pop("人臉識別登錄");
                  },
                ),
              ],
            ),
          );
        });
    showToast(result);
  }

4.Toast

地址：https://pub.flutter-io.cn/packages/fluttertoast

  _Toast() async {
    Fluttertoast.showToast(
        msg: "This is Short Toast",
        toastLength: Toast.LENGTH_SHORT,
        gravity: ToastGravity.CENTER,
        timeInSecForIosWeb: 1,
        backgroundColor: Colors.red,
        textColor: Colors.white,
        fontSize: 16.0
    );
  }

  void showToast(String data){
    Fluttertoast.showToast(
        msg: data,
        toastLength: Toast.LENGTH_SHORT,
        gravity: ToastGravity.BOTTOM,
        timeInSecForIosWeb: 1,
        backgroundColor: Colors.black,
        textColor: Colors.white,
        fontSize: 16.0
    );
  }

5.自定義dialog

class MyDialog extends Dialog {
  final String text;
  var timer;
  MyDialog(this.text);

  _showTimer(context) {
    timer = Timer.periodic(Duration(milliseconds: 5000), (t) {
      showToast('自動關閉dialog');
      Navigator.pop(context);
      t.cancel();
    });
  }

  void showToast(String data){
    Fluttertoast.showToast(
        msg: data,
        toastLength: Toast.LENGTH_SHORT,
        gravity: ToastGravity.BOTTOM,
        timeInSecForIosWeb: 1,
        backgroundColor: Colors.black,
        textColor: Colors.white,
        fontSize: 16.0
    );
  }
  @override
  Widget build(BuildContext context) {
    _showTimer(context);
    return Material(
        type: MaterialType.transparency,
        child: Center(
          child: Container(
            width: 300,
            height: 200,
            color: Colors.white,
            child: Column(
              children: <Widget>[
                Padding(
                  padding: EdgeInsets.all(10),
                  child: Stack(
                    children: <Widget>[
                      Align(
                        alignment: Alignment.center,
                        child: Text("標題"),
                      ),
                      Align(
                        alignment: Alignment.centerRight,
                        child: InkWell(
                          child: Icon(Icons.close),
                          onTap: () {
                            Navigator.pop(context);
                          },
                        ),
                      )
                    ],
                  ),
                ),
                Divider(),
                Column(
                  children: <Widget>[
                    Container(
                      height: 40,
                      child: Text(this.text),
                    )
                  ],
                ),
              ],
            ),
          ),
        ));
  }
}

總結