随笔 - 210  文章 - 0 评论 - 0 阅读 - 61532
< 2025年2月 >
26 27 28 29 30 31 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 1
2 3 4 5 6 7 8

设置应用程序入口

当我们导入依赖后,在应用程序顶层把 GetMaterialApp 作为顶层,如下所示
复制代码
import 'package:flutter/material.dart';
import 'package:get/get.dart';

void main() {
  runApp(MyApp());
}
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return GetMaterialApp(
      title: "GetX",
      home: Scaffold(
        appBar: AppBar(
          title: Text("GetX Title"),
        ),
      ),
    );
  }
}
复制代码

Dialog弹框

Dialog属性和说明

调用defaultDialog

复制代码
class GetxPage extends StatefulWidget {
  const GetxPage({super.key});

  @override
  State<GetxPage> createState() => _GetxPageState();
}

class _GetxPageState extends State<GetxPage> {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          ElevatedButton(
              onPressed: () {
                Get.defaultDialog(
                    title: "提示信息",
                    middleText: "你确定删除吗",
                    confirm: ElevatedButton(
                        onPressed: () {
                          print("确定");
                          Get.back(); //返回
                        },
                        child: const Text("确定")),
                    cancel: ElevatedButton(
                        onPressed: () {
                          print("取消");
                          Get.back(); //返回
                        },
                        child: const Text("取消")));
              },
              child: const Text("Getx defaultDialog")),
        ],
      ),
    );
  }
}
复制代码

snackbar提示信息

Snackbar属性和说明 

调用snackbar

Snackbar 和我们前面讲的toast有点相似, 如果想在应用程序中触发某些特定的事件后,需要弹出快
捷消息,那么使用 Snackbar 则是最佳的选择。
ElevatedButton(
   onPressed: () {
   Get.snackbar("Snackbar 标题", "欢迎使用Snackbar");
    },
 child: const Text("Getx snackbar")),

BottomSheet 改变主题

BottomSheet属性和说明 

调用snackbar

我们可以通过 GetX 很轻松的调用 bottomSheet() ,而且无需传入 context ,下面我给出一个例子,
使用 GetX 弹出 bottomSheet 并很轻松的实现切换主题 。
我们可以通过 Get.bottomSheet() 来显示 BottomSheet ,通过 Get.back() 实现路由返回,通过
Get.changeTheme(ThemeData.dark()) 切换皮肤主题,通过Get.isDarkMode判断主题样式。
复制代码
class GetxPage extends StatefulWidget {
  const GetxPage({super.key});

  @override
  State<GetxPage> createState() => _GetxPageState();
}

class _GetxPageState extends State<GetxPage> {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          ElevatedButton(
              onPressed: () {
                  // 弹出底部菜单
                Get.bottomSheet(Container(
                  color: Get.isDarkMode ? Colors.black12 : Colors.white,
                  height: 200,
                  child: Column(
                    children: [
                      // 白天模式列表项
                      ListTile(
                        leading: Icon(Icons.wb_sunny_outlined,
                            color:
                                Get.isDarkMode ? Colors.white : Colors.black),
                        title: Text("白天模式",
                            style: TextStyle(
                                color: Get.isDarkMode
                                    ? Colors.white
                                    : Colors.black)),
                        onTap: () {
                          // 切换为白天模式
                          Get.changeTheme(ThemeData.light());
                          // 关闭底部菜单
                          Get.back();
                          print("切换主题为白天模式");
                        },
                      ),
                      // 晚上模式列表项
                      ListTile(
                        leading: Icon(Icons.wb_sunny,
                            color:
                                Get.isDarkMode ? Colors.white : Colors.black),
                        title: Text("黑夜模式",
                            style: TextStyle(
                                color: Get.isDarkMode
                                    ? Colors.white
                                    : Colors.black)),
                        onTap: () {
                          // 切换为晚上模式
                          Get.changeTheme(ThemeData.dark());
                          // 关闭底部菜单
                          Get.back();
                          print("切换主题为晚上模式");
                        },
                      )
                    ],
                  ),
                ));
              },
              child: const Text("使用 Getx.bottomSheet 切换主题")),
          Text("这是一个字"),
        ],
      ),
    );
  }
}
复制代码

 

 

posted on   鲤斌  阅读(541)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· 没有源码,如何修改代码逻辑?
· NetPad:一个.NET开源、跨平台的C#编辑器
· PowerShell开发游戏 · 打蜜蜂
· 凌晨三点救火实录:Java内存泄漏的七个神坑,你至少踩过三个!
点击右上角即可分享
微信分享提示