Flutter屏幕滑动上拉展示插件slideupscreen的使用

Flutter屏幕滑动上拉展示插件slideupscreen的使用

关于

自定义滑动上拉屏幕。

使用

快速入门

创建一个继承自 SlideUpScreen 的小部件，并且其状态继承自 SlideUpScreenState。

class TestSlideUpScreen extends SlideUpScreen {
  @override
  TestSlideUpState createState() => TestSlideUpState();
}

class TestSlideUpState extends SlideUpScreenState<TestSlideUpScreen> {
  @override
  Color get backgroundColor => Colors.white;
  @override
  Radius get topRadius => Radius.circular(24);
  @override
  double get topOffset => 100;
  @override
  double get offsetToCollapse => 120;

  @override
  Widget? bottomBlock(BuildContext context) {
    return Container(
      height: MediaQuery.of(context).padding.bottom + 16,
      color: Colors.white,
    );
  }

  @override
  Widget body(BuildContext context) {
    List<Widget> widgets = [];
    for (int i = 1; i < 10; i++) {
      widgets.add(Container(
        height: 40,
        color: Color.fromARGB(
            255, (150 / i).floor(), (200 / i).floor(), (255 / i).floor()),
      ));
    }
    return Column(children: widgets);
  }
}

然后使用 BlurredPopup 导航到创建的小部件：

Navigator.of(context).push(BlurredPopup.withSlideUp(screen: TestSlideUpScreen()));

自定义

你可以通过覆盖变量来轻松定制小部件：

  • 背景颜色

    Color get backgroundColor => Colors.white;

    屏幕的背景颜色。

  • 顶部圆角

    Radius get topRadius => Radius.zero;

    屏幕顶部的圆角半径。

  • 顶部偏移

    double get topOffset => 100;

    当小部件不适合屏幕时的顶部偏移。

  • 折叠滚动偏移

    double get offsetToCollapse => 120;

    开始折叠小部件的滚动偏移。

示例演示

安装

pub.dev

SlideUpScreen 可以通过 pub.dev 获取。要安装它，只需在 pubspec.yaml 文件的依赖项中添加以下行：

slideupscreen: ^1.0.0

更多关于Flutter屏幕滑动上拉展示插件slideupscreen的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter屏幕滑动上拉展示插件slideupscreen的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


slideup_screen 是一个 Flutter 插件，它允许你在屏幕上滑动手势时展示一个可滑动的面板。这个插件非常适合用于实现类似 Google Maps 中的底部抽屉效果，或者用于展示额外的内容或操作选项。

安装

首先，你需要在 pubspec.yaml 文件中添加 slideup_screen 依赖：

dependencies:
  flutter:
    sdk: flutter
  slideup_screen: ^1.0.0  # 请使用最新版本

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

基本用法

下面是一个简单的示例，展示了如何使用 slideup_screen 插件：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('SlideUp Screen Example'),
        ),
        body: SlideUpScreen(
          minHeight: 100, // 最小高度
          maxHeight: MediaQuery.of(context).size.height * 0.8, // 最大高度
          body: Center(
            child: Text('Main Content'),
          ),
          slideUpPanel: Container(
            color: Colors.blue,
            child: Center(
              child: Text('Slide Up Panel'),
            ),
          ),
        ),
      ),
    );
  }
}

参数说明

  • minHeight: 面板的最小高度。
  • maxHeight: 面板的最大高度。
  • body: 主内容区域，即面板下方的部分。
  • slideUpPanel: 可滑动的面板内容。
  • onPanelSlide: 面板滑动时的回调函数，可以获取面板的当前高度。
  • onPanelOpened: 面板完全打开时的回调函数。
  • onPanelClosed: 面板完全关闭时的回调函数。

自定义滑动行为

你可以通过 onPanelSlide 回调来监听面板的滑动状态，并根据需要执行一些操作：

SlideUpScreen(
  minHeight: 100,
  maxHeight: MediaQuery.of(context).size.height * 0.8,
  body: Center(
    child: Text('Main Content'),
  ),
  slideUpPanel: Container(
    color: Colors.blue,
    child: Center(
      child: Text('Slide Up Panel'),
    ),
  ),
  onPanelSlide: (double position) {
    print('Panel position: $position');
  },
  onPanelOpened: () {
    print('Panel opened');
  },
  onPanelClosed: () {
    print('Panel closed');
  },
)
回到顶部