flutter：函数声明、函数对象和函数调用

Snackbar

• 作用：临时提示用户信息，通常出现在屏幕底部。
• 特点：
  • 不会阻塞用户操作
  • 可自动消失，也可以手动关闭
• GetX 使用方式：

Get.snackbar(
  '提示',
  '保存成功',
  snackPosition: SnackPosition.BOTTOM,
  duration: Duration(seconds: 2),
  backgroundColor: Colors.green,
  colorText: Colors.white,
  borderRadius: 10,
);

属性	类型	作用 / 说明	举例
title	String	标题文本	'提示'
message	String	内容文本	'保存成功'
snackPosition	SnackPosition	显示位置（TOP/BOTTOM）	SnackPosition.BOTTOM
duration	Duration	显示时长，自动消失	Duration(seconds: 2)
backgroundColor	Color	背景颜色	Colors.green
colorText	Color	文本颜色	Colors.white
margin	EdgeInsets	边距	EdgeInsets.all(10)
borderRadius	double	圆角	10.0

Dialog（对话框）

• 作用：弹出模态对话框，阻塞用户操作，需要用户响应（确认/取消等）。
• 特点：
  • 阻塞用户操作
  • 可以有按钮、输入框、列表等
• GetX 使用方式：

Get.defaultDialog(
  title: '提示',
  middleText: '确定要删除吗？',
  textConfirm: '确定',
  textCancel: '取消',
  onConfirm: () => Get.back(),
  barrierDismissible: true,
  radius: 10,
);

属性	类型	作用 / 说明	举例
title	String	标题文本	'提示'
middleText	String	中间显示的内容	'确定要删除吗？'
textConfirm	String	确认按钮文本	'确定'
textCancel	String	取消按钮文本	'取消'
onConfirm	VoidCallback	点击确认执行的函数	() => Get.back()
onCancel	VoidCallback	点击取消执行的函数	() => Get.back()
barrierDismissible	bool	点击背景是否关闭	true
radius	double	对话框圆角	10.0

BottomSheet（底部弹出框）

• 作用：从屏幕底部弹出内容，可以是列表、操作按钮等。
• 特点：
  • 部分覆盖页面，不会完全阻塞
  • 可以上下滑动关闭
• GetX 使用方式：

Get.bottomSheet(
  Container(
    color: Colors.white,
    height: 200,
    child: Column(
      children: [
        ListTile(
          leading: Icon(Icons.share),
          title: Text('分享'),
          onTap: () => Get.back(),
        ),
        ListTile(
          leading: Icon(Icons.delete),
          title: Text('删除'),
          onTap: () => Get.back(),
        ),
      ],
    ),
  ),
  backgroundColor: Colors.white,
  isDismissible: true,
  enableDrag: true,
  shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(10)),
);

属性	类型	作用 / 说明	举例
child	Widget	底部显示的内容	Container(...)
backgroundColor	Color	背景颜色	Colors.white
isDismissible	bool	点击空白区域是否关闭	true
enableDrag	bool	是否可以拖拽关闭	true
shape	ShapeBorder	底部弹出框形状	RoundedRectangleBorder(borderRadius: BorderRadius.circular(10))
enterBottomSheetDuration	Duration	弹出动画时长	Duration(milliseconds: 300)
exitBottomSheetDuration	Duration	收回动画时长	Duration(milliseconds: 300)

综合示例

import 'package:flutter/material.dart';
import 'package:get/get.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return GetMaterialApp(title: 'GetX UI Demo', home: const HomePage());
  }
}

class HomePage extends StatelessWidget {
  const HomePage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text("Snackbar/Dialog/BottomSheet")),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            ElevatedButton(
              onPressed: () {
                // 1. Snackbar
                Get.snackbar(
                  '提示',
                  '这是一个 Snackbar',
                  // snackPosition: Snackbar的位置,
                  snackPosition: SnackPosition.BOTTOM,
                  // duration: Snackbar的显示时长
                  duration: const Duration(seconds: 2),
                );
              },
              child: const Text('显示 Snackbar'),
            ),
            const SizedBox(height: 20),
            ElevatedButton(
              onPressed: () {
                // 2. Dialog
                Get.defaultDialog(
                  title: '提示',
                  middleText: '你确定要删除吗？',
                  textConfirm: '确定',
                  textCancel: '取消',
                  // onConfirm: 点击确认时的回调
                  onConfirm: () => Get.back(),
                );
              },
              child: const Text('显示 Dialog'),
            ),
            const SizedBox(height: 20),
            ElevatedButton(
              onPressed: () {
                // 3. BottomSheet
                Get.bottomSheet(
                  Container(
                    color: Colors.white,
                    height: 200,
                    child: Column(
                      children: [
                        ListTile(
                          leading: const Icon(Icons.share),
                          title: const Text('分享'),
                          // onTap: 点击分享时的回调
                          onTap: () => Get.back(),
                        ),
                        ListTile(
                          leading: const Icon(Icons.delete),
                          title: const Text('删除'),
                          // onTap: 点击删除时的回调
                          onTap: () => Get.back(),
                        ),
                      ],
                    ),
                  ),
                  // backgroundColor: BottomSheet的背景色
                  backgroundColor: Colors.white,
                  // isDismissible: 是否可以通过点击背景来关闭
                  isDismissible: true,
                );
              },
              child: const Text('显示 BottomSheet'),
            ),
          ],
        ),
      ),
    );
  }
}