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

1 回复

更多关于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'),
          ),
        ],
      ),
    );
  }
}
回到顶部