Flutter功能扩展插件with_value的使用
Flutter功能扩展插件with_value的使用
IMPORTANT
这是一个在包中使用的简单状态管理库。我不想依赖Provider作为依赖。
选择器直接来自Provider。
如果没有支持此包;如果您想要InheritedWidget作为状态管理,请使用Provider。
WithValue
WithValue
是一个InheritedWidget
,它允许您向小部件子树提供一个值,并通过WithValue.of<T>(context)
获取该值。- 确保为非原始类型重写
==
和hashCode
方法以确保正常功能。 - 示例用法:
WithValue<int>(
value: 42,
child: MyWidget(),
)
int value = WithValue.of<int>(context);
Usage
WithValueUpdate
是一个InheritedNotifier
,它允许您向小部件子树提供并更新一个值,并通过WithValueUpdate.of<T>(context)
获取该值。- 确保为非原始类型重写
==
和hashCode
方法以确保正常功能。 - 示例用法:
WithValueUpdate<MyNotifier>(
notifier: myNotifier,
child: MyWidget(),
)
MyNotifier notifier = WithValueUpdate.of<MyNotifier>(context);
示例代码
import 'package:flutter/material.dart';
import 'package:with_value/with_value.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return WithValue<String>(
value: 'Hello, World!',
child: MaterialApp(
title: 'WithValue Example',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: const MyHomePage(),
),
);
}
}
class MyHomePage extends StatelessWidget {
const MyHomePage({super.key});
@override
Widget build(BuildContext context) {
return WithValueUpdate(
notifier: Incrementer(),
child: Builder(builder: (context) {
return Scaffold(
appBar: AppBar(
title: const Text('WithValue Example'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
WithValue.of<String>(context),
),
Text(
WithValueUpdate.of<Incrementer>(context).value.toString(),
),
const SizedBox(height: 16),
ElevatedButton(
onPressed: () {
WithValueUpdate.of<Incrementer>(context).increment();
},
child: const Text('Increment'),
),
const SizedBox(height: 16),
ElevatedButton(
onPressed: () {
WithValueUpdate.of<Incrementer>(context).decrement();
},
child: const Text('Decrement'),
),
],
),
),
);
}),
);
}
}
class Incrementer with ChangeNotifier {
int _value = 0;
int get value => _value;
void increment() {
_value++;
notifyListeners();
}
void decrement() {
_value--;
notifyListeners();
}
}
更多关于Flutter功能扩展插件with_value的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html
更多关于Flutter功能扩展插件with_value的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
在 Flutter 中,with_value
并不是一个官方的或广泛使用的插件或类。可能你指的是某个特定库中的功能,或者你可能在寻找某种与值管理相关的功能。
如果你是在寻找一种在 Flutter 中管理和传递值的方式,以下是一些常见的解决方案,它们可能与你提到的 with_value
类似:
1. ValueNotifier 和 ValueListenableBuilder
ValueNotifier
是 Flutter 提供的一个简单的状态管理工具,它可以用来存储和监听一个值的变化。你可以使用 ValueListenableBuilder
来构建 UI,当值发生变化时,UI 会自动更新。
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
[@override](/user/override)
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(title: Text('ValueNotifier Example')),
body: ValueExample(),
),
);
}
}
class ValueExample extends StatefulWidget {
[@override](/user/override)
_ValueExampleState createState() => _ValueExampleState();
}
class _ValueExampleState extends State<ValueExample> {
final ValueNotifier<int> _counter = ValueNotifier<int>(0);
void _incrementCounter() {
_counter.value++;
}
[@override](/user/override)
Widget build(BuildContext context) {
return Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
ValueListenableBuilder<int>(
valueListenable: _counter,
builder: (context, value, child) {
return Text('Value: $value');
},
),
ElevatedButton(
onPressed: _incrementCounter,
child: Text('Increment'),
),
],
),
);
}
}
2. Provider
Provider
是 Flutter 中一个非常流行的状态管理库,它可以帮助你在应用程序中轻松地管理和共享状态。
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
[@override](/user/override)
Widget build(BuildContext context) {
return MaterialApp(
home: ChangeNotifierProvider(
create: (context) => CounterProvider(),
child: Scaffold(
appBar: AppBar(title: Text('Provider Example')),
body: CounterExample(),
),
),
);
}
}
class CounterProvider with ChangeNotifier {
int _count = 0;
int get count => _count;
void increment() {
_count++;
notifyListeners();
}
}
class CounterExample extends StatelessWidget {
[@override](/user/override)
Widget build(BuildContext context) {
return Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Consumer<CounterProvider>(
builder: (context, counter, child) {
return Text('Value: ${counter.count}');
},
),
ElevatedButton(
onPressed: () {
Provider.of<CounterProvider>(context, listen: false).increment();
},
child: Text('Increment'),
),
],
),
);
}
}
3. InheritedWidget
InheritedWidget
是 Flutter 中用于在 widget 树中共享数据的底层机制。虽然它比 Provider
更底层,但在某些情况下你可能需要直接使用它。
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
[@override](/user/override)
Widget build(BuildContext context) {
return MaterialApp(
home: CounterProvider(
counter: Counter(),
child: Scaffold(
appBar: AppBar(title: Text('InheritedWidget Example')),
body: CounterExample(),
),
),
);
}
}
class Counter {
int value = 0;
void increment() {
value++;
}
}
class CounterProvider extends InheritedWidget {
final Counter counter;
CounterProvider({required this.counter, required Widget child}) : super(child: child);
static CounterProvider of(BuildContext context) {
return context.dependOnInheritedWidgetOfExactType<CounterProvider>()!;
}
[@override](/user/override)
bool updateShouldNotify(CounterProvider oldWidget) {
return oldWidget.counter != counter;
}
}
class CounterExample extends StatelessWidget {
[@override](/user/override)
Widget build(BuildContext context) {
final counterProvider = CounterProvider.of(context);
final counter = counterProvider.counter;
return Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text('Value: ${counter.value}'),
ElevatedButton(
onPressed: () {
counter.increment();
// 强制重建
(context as Element).markNeedsBuild();
},
child: Text('Increment'),
),
],
),
);
}
}