Flutter弹出窗口插件alghwalbi_awesome_popup的使用

Flutter弹出窗口插件alghwalbi_awesome_popup的使用

alghwalbi_awesome_popup Package

它使用[英雄]变换和[导航]变换在两个小部件之间创建一个漂亮的过渡效果,从而创建一个平滑的过渡效果。

安装

1. 在你的`pubspec.yaml`文件中添加包:
    dependencies:
        alghwalbi_awesome_popup: <最新版本>

2. 运行以下命令以获取包:
flutter pub get

3. 在Dart文件中导入包:
import 'package:alghwalbi_awesome_popup/alghwalbi_awesome_popup.dart';

4. 开始在Flutter应用中使用`AlghwalbiAwesomePopup`小部件

使用

import 'package:alghwalbi_awesome_popup/alghwalbi_awesome_popup.dart';

AlghwalbiAwesomePopup(
    popupKey: "testPopupKey",
    shrinkedWidget: MyShrinkedWidget(), // 缩放状态下的小部件
    expandedWidget: MyExpandedWidget(), // 展开状态下的小部件
    borderRadius: BorderRadius.circular(10.0), // 圆角半径
    color: Colors.red, // 背景颜色
    isScrollable: false, // 是否可滚动
    scrollDirection: Axis.vertical, // 滚动方向
    tooltip: "点击我以弹出", // 提示信息
    shapeBorder: RoundedRectangleBorder(), // 形状边界
);

这段代码演示了如何使用alghwalbi_awesome_popup包中的AlghwalbiAwesomePopup类。它创建了一个具有多种属性的弹出窗口小部件,如popupKeyshrinkedWidgetexpandedWidgetborderRadiuscolorisScrollablescrollDirectiontooltipshapeBorder

示例代码

下面是一个完整的示例,展示了如何在Flutter应用中使用AlghwalbiAwesomePopup小部件:

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Alghwalbi Awesome Popup Example'),
        ),
        body: Center(
          child: PopupButton(
            onPressed: () {
              showPopup(context);
            },
            child: Text('点击这里弹出'),
          ),
        ),
      ),
    );
  }
}

class PopupContent extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Container(
      padding: EdgeInsets.all(20),
      color: Colors.white,
      child: Column(
        mainAxisSize: MainAxisSize.min,
        children: [
          Text('这是弹出内容', style: TextStyle(fontSize: 20)),
          SizedBox(height: 20),
          ElevatedButton(
            onPressed: () {
              Navigator.of(context).pop();
            },
            child: Text('关闭'),
          ),
        ],
      ),
    );
  }
}

void showPopup(BuildContext context) {
  showDialog(
    context: context,
    builder: (BuildContext context) {
      return AlghwalbiAwesomePopup(
        popupKey: "testPopupKey",
        shrinkedWidget: Container(
          width: 50,
          height: 50,
          color: Colors.blue,
        ),
        expandedWidget: PopupContent(),
        borderRadius: BorderRadius.circular(10.0),
        color: Colors.red,
        isScrollable: false,
        scrollDirection: Axis.vertical,
        tooltip: "点击我以弹出",
        shapeBorder: RoundedRectangleBorder(),
      );
    },
  );
}

更多关于Flutter弹出窗口插件alghwalbi_awesome_popup的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter弹出窗口插件alghwalbi_awesome_popup的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然,以下是如何在Flutter项目中使用alghwalbi_awesome_popup插件来创建弹出窗口的示例代码。

首先,确保你已经在pubspec.yaml文件中添加了alghwalbi_awesome_popup依赖:

dependencies:
  flutter:
    sdk: flutter
  alghwalbi_awesome_popup: ^x.y.z  # 替换为最新版本号

然后运行flutter pub get来安装依赖。

示例代码

1. 导入必要的包

在你的Dart文件中导入alghwalbi_awesome_popup包:

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

2. 创建弹出窗口内容

定义一个简单的弹出窗口内容,例如一个带有按钮的对话框:

Widget buildPopupContent() {
  return Center(
    child: Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        Text('这是一个弹出窗口!'),
        SizedBox(height: 20),
        ElevatedButton(
          onPressed: () {
            // 关闭弹出窗口
            PopupWidget.dismiss(context);
          },
          child: Text('关闭'),
        ),
      ],
    ),
  );
}

3. 使用PopupWidget显示弹出窗口

在你的主应用或某个页面中,使用PopupWidget来显示弹出窗口:

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter Popup Example'),
        ),
        body: Center(
          child: ElevatedButton(
            onPressed: () {
              // 显示弹出窗口
              PopupWidget.bottomPopup(
                context: context,
                builder: buildPopupContent,
                width: 300,
                height: 200,
                isDismissible: true, // 是否可以通过点击背景关闭
                backgroundColor: Colors.white,
                elevation: 10,
                borderRadius: BorderRadius.circular(16),
              ).whenComplete(() {
                // 弹出窗口关闭后的回调
                print('弹出窗口已关闭');
              });
            },
            child: Text('显示弹出窗口'),
          ),
        ),
      ),
    );
  }
}

完整代码

将上述代码片段整合在一起,你会得到一个完整的Flutter应用,它包含一个按钮,点击按钮后会显示一个弹出窗口:

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter Popup Example'),
        ),
        body: Center(
          child: ElevatedButton(
            onPressed: () {
              PopupWidget.bottomPopup(
                context: context,
                builder: (context) {
                  return Center(
                    child: Column(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: <Widget>[
                        Text('这是一个弹出窗口!'),
                        SizedBox(height: 20),
                        ElevatedButton(
                          onPressed: () {
                            PopupWidget.dismiss(context);
                          },
                          child: Text('关闭'),
                        ),
                      ],
                    ),
                  );
                },
                width: 300,
                height: 200,
                isDismissible: true,
                backgroundColor: Colors.white,
                elevation: 10,
                borderRadius: BorderRadius.circular(16),
              ).whenComplete(() {
                print('弹出窗口已关闭');
              });
            },
            child: Text('显示弹出窗口'),
          ),
        ),
      ),
    );
  }
}

这个示例展示了如何使用alghwalbi_awesome_popup插件在Flutter应用中创建并显示一个弹出窗口。你可以根据需要进一步自定义弹出窗口的样式和行为。

回到顶部