Flutter可按压交互插件pressable_flutter的使用
Flutter可按压交互插件 pressable_flutter 的使用
Pressable 是一个高度可定制的 Flutter 小部件，提供了漂亮的按压动画和效果。它非常适合用于创建具有最小努力的交互式 UI 元素。
特性
- 🎯 按压时缩小动画
- 💫 材料风格的波纹效果
- 🎨 自定义背景/前景颜色过渡
- ⚡ 可配置的动画持续时间
- 🔒 禁用状态处理
- 🎭 多种效果类型（缩小、波纹、组合）
安装
在你的 pubspec.yaml 文件中添加以下内容：
dependencies:
pressable_flutter: <latest_version>
然后运行 flutter pub get 来安装该包。
使用方法
首先，在 Dart 文件中导入包：
import 'package:pressable_flutter/pressable_flutter.dart';
示例代码
以下是一个简单的示例，展示如何使用 Pressable 小部件并结合多种效果：
import 'dart:developer';
import 'package:flutter/material.dart';
import 'package:pressable_flutter/pressable_flutter.dart';
void main() {
runApp(const MaterialApp(home: Home()));
}
class Home extends StatelessWidget {
const Home({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.white,
body: Center(
child: Pressable(
effect: PressEffect.withRipple(
rippleEffect: RippleEffect.background(
color: Colors.amberAccent,
borderRadius: BorderRadius.circular(12),
),
),
onPress: () => log('onPress'),
onLongPress: () => log('onLongPress'),
child: Container(
height: 50,
width: 300,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10),
border: Border.all(color: Colors.grey),
),
child: const Center(
child: Text(
'Click Me',
style: TextStyle(
color: Colors.black,
fontSize: 20,
fontWeight: FontWeight.bold,
),
),
),
),
),
),
);
}
}
Pressable 效果
波纹效果 (RippleEffect)
RippleEffect 提供了按压时的波纹效果。它可以自定义属性如颜色和圆角半径。
属性
- color: 波纹效果的颜色。
- borderRadius: 背景波纹效果的圆角半径（仅适用于背景类型）。
工厂构造函数
- foreground: 创建带有可选颜色的前景波纹效果。
- foregroundSaturated: 创建饱和的前景波纹效果。
- background: 创建带有可选颜色和圆角半径的背景波纹效果。
示例
Pressable(
effect: RippleEffect.foreground(),
onPress: () => log('onPress'),
onLongPress: () => log('onLongPress'),
child: Container(
height: 50,
width: 300,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10),
gradient: LinearGradient(
colors: [Colors.red.shade800, Colors.redAccent],
),
boxShadow: [
BoxShadow(
color: Colors.black.withAlpha(30),
spreadRadius: 1,
blurRadius: 8,
offset: const Offset(0, 4),
),
],
),
child: const Center(
child: Text(
'Click Me',
style: TextStyle(
color: Colors.white,
fontSize: 20,
fontWeight: FontWeight.bold,
),
),
),
),
)
前景波纹效果
Pressable(
effect: PressEffect.withRipple(
rippleEffect: RippleEffect.foreground(
color: Colors.deepPurple,
),
),
onPress: () => log('onPress'),
onLongPress: () => log('onLongPress'),
child: Container(
height: 50,
width: 300,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10),
border: Border.all(color: Colors.grey, width: 3),
),
child: const Center(
child: Text(
'Click Me',
style: TextStyle(
color: Colors.black,
fontSize: 20,
fontWeight: FontWeight.bold,
),
),
),
),
)
饱和前景波纹效果
Pressable(
effect: PressEffect.withSaturatedRipple(),
onPress: () => log('onPress'),
onLongPress: () => log('onLongPress'),
child: Container(
height: 50,
width: 300,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10),
gradient: const LinearGradient(
colors: [Colors.amber, Colors.amberAccent],
),
boxShadow: [
BoxShadow(
color: Colors.black.withAlpha(30),
spreadRadius: 1,
blurRadius: 8,
offset: const Offset(0, 4),
),
],
),
child: const Center(
child: Text(
'Click Me',
style: TextStyle(
color: Colors.black,
fontSize: 20,
fontWeight: FontWeight.bold,
),
),
),
),
)
背景波纹效果
Pressable(
effect: PressEffect.withRipple(
rippleEffect: RippleEffect.background(
color: Colors.amberAccent,
borderRadius: BorderRadius.circular(12),
),
),
onPress: () => log('onPress'),
onLongPress: () => log('onLongPress'),
child: Container(
height: 50,
width: 300,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10),
border: Border.all(color: Colors.grey),
),
child: Center(
child: Text(
'Click Me',
style: GoogleFonts.poppins(
color: Colors.black,
fontSize: 20,
fontWeight: FontWeight.bold,
),
),
),
),
)
PressEffect
PressEffect 提供了按压时的缩小效果。它还可以与波纹效果结合使用，以实现更动态的交互。
属性
- shrinkFactor: 按压时缩小尺寸的因素（默认值：0.95）。
- rippleEffect: 可选的波纹效果，与按压效果结合使用。
工厂构造函数
- withRipple: 带有可自定义波纹效果的按压效果。
- withSaturatedRipple: 带有饱和波纹效果的按压效果。
示例
Pressable(
onPress: () => log('onPress'),
onLongPress: () => log('onLongPress'),
child: Container(
height: 50,
width: 300,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10),
gradient: LinearGradient(
colors: [Colors.blue.shade800, Colors.blueAccent],
),
boxShadow: [
BoxShadow(
color: Colors.black.withAlpha(30),
spreadRadius: 1,
blurRadius: 8,
offset: const Offset(0, 4),
),
],
),
child: const Center(
child: Text(
'Click Me',
style: TextStyle(
color: Colors.white,
fontSize: 20,
fontWeight: FontWeight.bold,
),
),
),
),
)
更多关于Flutter可按压交互插件pressable_flutter的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
