Flutter中GetX系列二--Snackbar基本使用(顶部弹窗)

Snackbar基本使用

第一步:应用程序入口设置

当我们导入依赖后,在应用程序顶层把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"),),
      ),
    );
  }
}

第二步:调用snackbar

我们可以通过Get.snackbar() 来显示 snackbar ,如下所示

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"),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              ElevatedButton(
                onPressed: () {
                  Get.snackbar("Snackbar 标题", "欢迎使用Snackbar");
                },
                child: Text("显示 Snackbar"))
            ],
          ),
        ),
      ),
    );
  }
}

效果展示

 Snackbar属性说明

序列号字段属性描述
1titleString弹出的标题文字
2messageString弹出的消息文字
3colorTextColortitle和message的文字颜色
4durationDurationSnackbar弹出的持续时间(默认3秒)
5instantInitbool当false可以把snackbar 放在initState,默认true
6snackPositionSnackPosition弹出时的位置,有两个选项【TOP,BOTTOM】默认TOP
7titleTextWidget弹出标题的组件,设置该属性会导致title属性失效
8messageTextWidget弹出消息的组件,设置该属性会导致messageText属性失效
9iconWidget弹出时图标,显示在title和message的左侧
10shouldIconPulsebool弹出时图标是否闪烁,默认false
11maxWidthdoubleSnackbar最大的宽度
12marginEdgeInsetsSnackbar外边距,默认zero
13paddingEdgeInsetsSnackbar内边距,默认EdgeInsets.all(16)
14borderRadiusdouble边框圆角大小,默认15
15borderColorColor边框的颜色,必须设置borderWidth,否则无效果
16borderWidthdouble边框的线条宽度
17backgroundColorColorSnackbar背景颜色,默认Colors.grey.withOpacity(0.2)
18leftBarIndicatorColorColor左侧指示器的颜色
19boxShadowsListSnackbar阴影颜色
20backgroundGradientGradient背景的线性颜色
21mainButtonTextButton主要按钮,一般显示发送、确认按钮
22onTapOnTap点击Snackbar事件回调
23isDismissiblebool是否开启Snackbar手势关闭,可配合dismissDirection使用
24showProgressIndicatorbool是否显示进度条指示器,默认false
25dismissDirectionSnackDismissDirectionSnackbar关闭的方向
26progressIndicatorControllerAnimationController进度条指示器的动画控制器
27progressIndicatorBackgroundColorColor进度条指示器的背景颜色
28progressIndicatorValueColorAnimation进度条指示器的背景颜色,Animation
29snackStyleSnackStyleSnackbar是否会附加到屏幕边缘
30forwardAnimationCurveCurveSnackbar弹出的动画,默认Curves.easeOutCirc
31reverseAnimationCurveCurveSnackbar消失的动画,默认Curves.easeOutCirc
32animationDurationDurationSnackbar弹出和小时的动画时长,默认1秒
33barBlurdoubleSnackbar背景的模糊度
34overlayBlurdouble弹出时的毛玻璃效果值,默认0
35snackbarStatusSnackbarStatusCallbackSnackbar弹出或消失时的事件回调(即将打开、已打开、即将关闭、已关闭)
36overlayColorColor弹出时的毛玻璃的背景颜色
37userInputFormForm用户输入表单

  • 1
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值