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/
