BottomSheet 是底部彈出的一個(gè)組件,常用于單選、驗(yàn)證碼二次校驗(yàn)彈窗等,GetX的BottomSheet底部彈出是自定義通過路由push的方法實(shí)現(xiàn)底部彈窗的一個(gè)效果。
BottomSheet使用
我們可以通過GetX很輕松的調(diào)用bottomSheet()泥张,而且無需傳入context,下面我給出一個(gè)例子鞠值,使用GetX彈出bottomSheet并很輕松的實(shí)現(xiàn)切換主題
第一步:應(yīng)用程序入口設(shè)置
當(dāng)我們導(dǎo)入依賴后媚创,在應(yīng)用程序頂層把GetMaterialApp 作為頂層,如下所示
import 'package:flutter/material.dart';
import 'package:flutter_getx_example/DialogExample/DialogExample.dart';
import 'package:get/get.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return GetMaterialApp(
title: "GetX",
home: DialogExample(),
);
}
}
第二步:調(diào)用BottomSheet
我們可以通過Get.bottomSheet()
來顯示 BottomSheet
彤恶,如下所示
import 'package:get/get.dart';
class BottomSheetExample extends StatelessWidget {
GlobalKey<NavigatorState> _navKey = GlobalKey();
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("GetX Title"),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
ElevatedButton(onPressed: () {
Get.bottomSheet(
Container(
child: Wrap(
children: [
ListTile(
leading: Icon(Icons.wb_sunny_outlined),
title: Text("白天模式"),
onTap: () {
Get.changeTheme(ThemeData.light());
},
),
ListTile(
leading: Icon(Icons.wb_sunny),
title: Text("黑夜模式"),
onTap: () {
Get.changeTheme(ThemeData.dark());
},
)
],
),
)
);
}, child: Text("Bottom Sheet"))
],
),
),
);
}
}
效果展示
如果您運(yùn)行了代碼钞钙,那么恭喜你,你已經(jīng)會(huì)用GetX
來展示BottomSheet
了声离。你將得到下面的結(jié)果:
BottomSheet屬性和說明
字段 | 屬性 | 描述 |
---|---|---|
bottomsheet | Widget | 彈出的Widget組件 |
backgroundColor | Color | bottomsheet的背景顏色 |
elevation | double | bottomsheet的陰影 |
persistent | bool | 是否添加到路由中 |
shape | ShapeBorder | 邊框形狀芒炼,一般用于圓角效果 |
clipBehavior | Clip | 裁剪的方式 |
barrierColor | Color | 彈出層的背景顏色 |
ignoreSafeArea | bool | 是否忽略安全適配 |
isScrollControlled | bool | 是否支持全屏彈出,默認(rèn)false |
useRootNavigator | bool | 是否使用根導(dǎo)航 |
isDismissible | bool | 點(diǎn)擊背景是否可關(guān)閉术徊,默認(rèn)ture |
enableDrag | bool | 是否可以拖動(dòng)關(guān)閉本刽,默認(rèn)true |
settings | RouteSettings | 路由設(shè)置 |
enterBottomSheetDuration | Duration | bottomsheet進(jìn)入時(shí)的動(dòng)畫時(shí)間 |
exitBottomSheetDuration | Duration | bottomsheet退出時(shí)的動(dòng)畫時(shí)間 |
轉(zhuǎn)自:https://liujunmin.com/