Flutter微信锚点插件wx_anchor的使用
Flutter微信锚点插件wx_anchor的使用
使用说明
WxAnchor 是一个在 widget 内部创建可点击区域的插件，用户点击或悬停时会激活一个交互式覆盖层。
示例代码
import 'package:flutter/material.dart';
import 'package:wx_anchor/wx_anchor.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
useMaterial3: true,
),
home: const MyHomePage(),
);
}
}
class MyHomePage extends StatelessWidget {
const MyHomePage({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('Flutter wx_anchor')),
body: Padding(
padding: const EdgeInsets.all(1Space ),
child: Column(
children: [
WxText.displayMedium(
'WxAnchor',
gradient: LinearGradient(
colors: [Colors.green, Colors.blue],
begin: Alignment.topLeft,
end: Alignment.bottomRight,
),
fontWeight: FontWeight.bold,
letterSpacing: -22,
),
SizedBox(height: 20),
Example(
title: 'Rectangle Shape',
child: Wrap(
spacing: 40,
crossAxisAlignment: WrapCrossAlignment.center,
children: [
WxAnchor(
onTap: () {},
padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 6),
borderRadius: BorderRadius.circular(5),
child: const Text('Click Here'),
),
WxAnchor(
onTap: () {},
overlayExtent: Size.zero,
overlayColor: Colors.amber,
focusedStyle: const WxAnchorStyle(
overlayOpacity: 0.25,
overlayExtent: Size(130, 40),
),
hoveredStyle: const WxAnchorStyle(
overlayOpacity: 0.15,
overlayExtent: Size(130, 40),
),
pressedStyle: WxAnchorStyle.rectangle(
overlayOpacity: 0.25,
overlayColor: Colors.blue,
overlayExtent: const Size(120, 30),
borderRadius: BorderRadius.circular(5),
),
borderRadius: BorderRadius.circular(15),
child: const Text('Custom Overlay'),
),
],
),
),
SizedBox(height: 20),
Example(
title: 'Circle Shape',
child: Wrap(
spacing: 40,
crossAxisAlignment: WrapCrossAlignment.center,
children: [
WxAnchor.circle(
onTap: () {},
padding: const EdgeInsets.all(10),
child: const Icon(Icons.chat),
),
WxAnchor.circle(
onTap: () {},
overlayRadius: 0,
hoveredStyle: WxAnchorStyle.circle(overlayRadius: 25),
pressedStyle: WxAnchorStyle.circle(overlayRadius: 20),
focusedStyle: WxAnchorStyle.circle(overlayRadius: 20),
child: const Icon(Icons.power_off),
),
WxAnchor.circle(
onTap: () {},
opacity: 1,
scale: 1,
overlay: false,
hoveredStyle: const WxAnchorStyle(opacity: .7, scale: 1),
pressedStyle: const WxAnchorStyle(opacity: 1, scale: 1.5),
focusedStyle: const WxAnchorStyle(opacity: 1, scale: 1.5),
child: const Icon(Icons.star),
),
],
),
),
],
),
),
);
}
}
class Wrapper extends StatelessWidget {
const Wrapper({
super.key,
required this.children,
});
final List<Widget> children;
@override
Widget build(BuildContext context) {
return Center(
child: ConstrainedBox(
constraints: const BoxConstraints(maxWidth: 300),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: children,
),
),
);
}
}
class Example extends StatelessWidget {
const Example({
super.key,
required this.title,
required this.child,
});
final String title;
final Widget child;
@override
Widget build(BuildContext context) {
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
children: [
Padding(
padding: const EdgeInsets.fromLTRB(10, 0, 0, 0),
child: WxText.labelLarge(title),
),
Card.outlined(
child: SizedBox(
width: double.infinity,
height: 100,
child: Padding(
padding: const EdgeInsets.all(15.0),
child: Center(child: child),
),
),
),
],
);
}
}
示例解释
-
Rectangle Shape:
WxAnchor( onTap: () {}, padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 66), borderRadius: BorderRadius.circular(5), child: const Text('Click Here'), )这个示例展示了一个矩形形状的
WxAnchor，当用户点击时触发指定的回调函数，并且设置了边距和圆角。 -
Circle Shape:
WxAnchor.circle( onTap: () {}, padding: const EdgeInsets.all(10), child: const Icon(Icons.chat), )这个示例展示了圆形形状的
WxAnchor，同样设置点击事件和边距。 -
Customize Overlay Effect:
WxAnchor( onTap: () {}, overlayColor: Colors.amber, focusedStyle: const WxAnchorStyle( overlayOpacity: 0.25, overlayExtent: Size(130, 40), ), hoveredStyle: const WxAnchorStyle( overlayOpacity: 0.15, overlayExtent: Size(130, 40), ), pressedStyle: WxAnchorStyle.rectangle( overlayOpacity: 0.25, overlayColor: Colors.blue, overlayExtent: const Size(120, 30), borderRadius: BorderRadius.circular(5), ), borderRadius: BorderRadius.circular(15), child: const Text('Custom Overlay'), )这个示例展示了如何自定义覆盖层的效果，包括不同状态下的透明度、覆盖范围等。
-
Child Opacity & Scale:
WxAnchor.circle( onTap: () {}, opacity: 1, scale: 1, overlay: false, hoveredStyle: const WxAnchorStyle(opacity: .7, scale: 1), pressedStyle: const WxAnchorStyle(opacity: 1, scale: 1.5), focusedStyle: const WxAnchorStyle(opacity: 1, scale: 1.5), child: const Icon(Icons.chat), )
更多关于Flutter微信锚点插件wx_anchor的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
1 回复
更多关于Flutter微信锚点插件wx_anchor的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
当然，以下是一个关于如何在Flutter项目中使用wx_anchor插件来实现微信锚点功能的代码示例。wx_anchor插件可以帮助你在Flutter应用中实现类似微信文章中的锚点跳转功能。
首先，确保你已经在pubspec.yaml文件中添加了wx_anchor依赖：
dependencies:
flutter:
sdk: flutter
wx_anchor: ^最新版本号 # 请替换为实际发布的最新版本号
然后，运行flutter pub get来安装依赖。
接下来，在你的Flutter项目中创建一个简单的页面来演示如何使用wx_anchor。
import 'package:flutter/material.dart';
import 'package:wx_anchor/wx_anchor.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter wx_anchor Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: AnchorDemoPage(),
);
}
}
class AnchorDemoPage extends StatefulWidget {
@override
_AnchorDemoPageState createState() => _AnchorDemoPageState();
}
class _AnchorDemoPageState extends State<AnchorDemoPage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('wx_anchor Demo'),
),
body: SingleChildScrollView(
child: Column(
children: <Widget>[
Text(
'点击下面的链接跳转到指定锚点',
style: TextStyle(fontSize: 20),
),
SizedBox(height: 20),
AnchorLink(
anchorName: 'section1',
child: Text(
'跳转到Section 1',
style: TextStyle(color: Colors.blue, decoration: TextDecoration.underline),
),
),
SizedBox(height: 20),
AnchorLink(
anchorName: 'section2',
child: Text(
'跳转到Section 2',
style: TextStyle(color: Colors.blue, decoration: TextDecoration.underline),
),
),
SizedBox(height: 100), // 一些空白空间，以便滚动
// 内容部分
Anchor(
name: 'section1',
child: Container(
margin: EdgeInsets.symmetric(vertical: 20),
padding: EdgeInsets.all(16),
decoration: BoxDecoration(
border: Border.all(color: Colors.grey.withOpacity(0.5)),
borderRadius: BorderRadius.circular(8),
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
'Section 1',
style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold),
),
Text(
'这里是Section 1的内容。',
style: TextStyle(fontSize: 16),
),
],
),
),
),
SizedBox(height: 100), // 一些空白空间，以便滚动
Anchor(
name: 'section2',
child: Container(
margin: EdgeInsets.symmetric(vertical: 20),
padding: EdgeInsets.all(16),
decoration: BoxDecoration(
border: Border.all(color: Colors.grey.withOpacity(0.5)),
borderRadius: BorderRadius.circular(8),
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
'Section 2',
style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold),
),
Text(
'这里是Section 2的内容。',
style: TextStyle(fontSize: 16),
),
],
),
),
),
],
),
),
);
}
}
在这个示例中：
Anchor组件用于定义锚点位置。每个锚点都需要一个唯一的name属性。AnchorLink组件用于创建可以点击的链接，点击后将滚动到对应的锚点位置。anchorName属性指定了要跳转到的锚点名称。
运行这个示例应用，你将看到一个页面，上面有两个链接，分别指向两个不同的锚点。点击这些链接，页面将平滑滚动到相应的锚点位置。
这个示例展示了如何在Flutter项目中使用wx_anchor插件实现基本的锚点跳转功能。根据实际需求，你可以进一步自定义和扩展这些组件。
