【Flutter -- GetX】弹框 - Dialog、Snackbar、BottomSheet

【Flutter -- GetX】弹框 - Dialog、Snackbar、BottomSheet_第1张图片

文章目录

    • 前言
      • GetX 集成
    • Dialog
      • 1. 简介
      • 2. 属性
      • 3. 使用
    • Snackbar
      • 1. 简介
      • 2. 属性
      • 3. 使用
    • BottomSheet
      • 1. 简介
      • 2. 属性
      • 3. 使用

前言

本文是基于官方最新稳定版本 get: ^4.5.1 来进行开发。

通过阅读本文,你将学会如下:

  • 会使用 Dialog
  • 会使用 Snackbar
  • 会使用 BottomSheet

GetX 集成

1. 在 pubspec.yaml 文件中添加 GetX 的依赖,如下:

dependencies:
  flutter:
    sdk: flutter
  get: ^4.5.1

2. 需要对 GetX 进行初始化,将默认的 MaterialApp 替换为 GetMaterialApp 即可,如下:

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
  
  @override
  Widget build(BuildContext context) {
    return GetMaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: HomePage(),
    );
  }
}

Dialog

1. 简介

Dialog 底层其实是对 AlertDialog 进行了封装, 一般用于二次确认的弹出框,比如当点击某个按钮提交资料时,需要用户二次确认,以防止误操作。

2. 属性

【Flutter -- GetX】弹框 - Dialog、Snackbar、BottomSheet_第2张图片【Flutter -- GetX】弹框 - Dialog、Snackbar、BottomSheet_第3张图片

3. 使用

  • 效果图

【Flutter -- GetX】弹框 - Dialog、Snackbar、BottomSheet_第4张图片

  • 代码
import 'package:flutter/material.dart';
import 'package:get/get.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return GetMaterialApp(
      title: 'Flutter Demo',

        home: Scaffold(
            appBar: AppBar(
              title: Text('GetX 对话框基本使用'),
            ),
            body: Center(
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                crossAxisAlignment: CrossAxisAlignment.center,
                children: <Widget>[
                  ElevatedButton(
                    onPressed: (){
                      Get.defaultDialog(onConfirm: () => print("Ok"), middleText: "Dialog made in 3 lines of code");
                    },
                    child: Text("显示 Dialog"),
                  ),
                ],
              ),
            )
        )

    );

  }
}

Snackbar

1. 简介

如果想在应用程序中触发某些特定的事件后,需要弹出一则快捷消息,那么使用 Snackbar 则是最佳的选择,接下来我们看一下 GetX 如何来联调 Snackbar 来使用。

2. 属性

【Flutter -- GetX】弹框 - Dialog、Snackbar、BottomSheet_第5张图片【Flutter -- GetX】弹框 - Dialog、Snackbar、BottomSheet_第6张图片【Flutter -- GetX】弹框 - Dialog、Snackbar、BottomSheet_第7张图片

3. 使用

  • 效果图
    【Flutter -- GetX】弹框 - Dialog、Snackbar、BottomSheet_第8张图片

  • 代码

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

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return GetMaterialApp(
      title: 'Flutter Demo',

        home: Scaffold(
            appBar: AppBar(
              title: Text('GetX 对话框基本使用'),
            ),
            body: Center(
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                crossAxisAlignment: CrossAxisAlignment.center,
                children: <Widget>[
                  ElevatedButton(
                    onPressed: (){
                      Get.snackbar("Snackbar 标题", "欢迎使用Snackbar");
                    },
                    child: Text("显示 Snackbar"),
                  ),
                ],
              ),
            )
        )

    );

  }
}

BottomSheet

1. 简介

BottomSheet 是底部弹出的一个组件,常用于单选、验证码二次校验弹窗等,GetX 的 BottomSheet 底部弹出是自定义通过路由push 的方法实现底部弹窗的一个效果。

2. 属性

【Flutter -- GetX】弹框 - Dialog、Snackbar、BottomSheet_第9张图片

3. 使用

  • 效果图

【Flutter -- GetX】弹框 - Dialog、Snackbar、BottomSheet_第10张图片

  • 代码
import 'package:flutter/material.dart';
import 'package:get/get.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return GetMaterialApp(
      title: 'Flutter Demo',

        home: Scaffold(
            appBar: AppBar(
              title: Text('GetX 对话框基本使用'),
            ),
            body: Center(
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                crossAxisAlignment: CrossAxisAlignment.center,
                children: <Widget>[
                  ElevatedButton(
                    onPressed: (){
                      Get.bottomSheet(
                          Container(
                            child: Wrap(
                              children: <Widget>[
                                ListTile(leading: Icon(Icons.music_note), title: Text('Music'), onTap: () => {}),
                                ListTile(
                                  leading: Icon(Icons.videocam),
                                  title: Text('Video'),
                                  onTap: () => {},
                                ),
                              ],
                            ),
                          ),
                          backgroundColor: Colors.white);
                    },
                    child: Text("BottomSheets"),
                  ),
                ],
              ),
            )
        )

    );

  }
}

你可能感兴趣的:(Flutter,--,实战,flutter,android)