@qidiandasheng
2022-07-29T16:07:45.000000Z
字数 8578
阅读 515
Flutter
import 'package:flutter/material.dart';
class CounterPage extends StatefulWidget {
const CounterPage({Key? key, required this.title}) : super(key: key);
final String title;
@override
CounterPageState createState() => CounterPageState();
}
class CounterPageState extends State<CounterPage> {
int _counter = 0;
void _incrementCounter() {
setState(() {
_counter++;
});
}
void _decrementCounter() {
setState(() {
_counter--;
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: Counter(
counter: _counter,
decrementCounter: _decrementCounter,
incrementCounter: _incrementCounter)));
}
}
class Counter extends StatelessWidget {
final counter;
final decrementCounter;
final incrementCounter;
Counter(
{Key? key,
this.counter: 0,
@required this.decrementCounter,
@required this.incrementCounter})
: super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
body: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
'Counter:',
style: Theme.of(context).textTheme.headline4,
),
Text(
'$counter',
style: Theme.of(context).textTheme.headline4,
),
],
),
TextButton(
style: ButtonStyle(
backgroundColor:
MaterialStateProperty.resolveWith((states) => Colors.orange)),
child:
Text('Increment Counter', style: TextStyle(color: Colors.white)),
onPressed: incrementCounter,
),
TextButton(
style: ButtonStyle(
backgroundColor:
MaterialStateProperty.resolveWith((states) => Colors.red)),
child:
Text('Decrement Counter', style: TextStyle(color: Colors.white)),
onPressed: decrementCounter,
)
],
));
}
}
import 'package:flutter/material.dart';
class CounterPage extends StatefulWidget {
const CounterPage({Key? key, required this.title}) : super(key: key);
final String title;
static CounterPageState of(BuildContext context) {
return context
.dependOnInheritedWidgetOfExactType<MyInheritedWidget>()!
.data;
}
@override
CounterPageState createState() => CounterPageState();
}
class CounterPageState extends State<CounterPage> {
int _counter = 0;
void _incrementCounter() {
setState(() {
_counter++;
});
}
void _decrementCounter() {
setState(() {
_counter--;
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(child: MyInheritedWidget(child: Counter(), data: this)));
}
}
class Counter extends StatefulWidget {
const Counter({Key? key}) : super(key: key);
@override
CounterState createState() => CounterState();
}
class CounterState extends State<Counter> {
late int counter;
late CounterPageState data;
@override
void didChangeDependencies() {
super.didChangeDependencies();
data = CounterPage.of(context);
counter = data._counter;
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
'Inherited Counter:',
style: Theme.of(context).textTheme.headline4,
),
Text(
'$counter',
style: Theme.of(context).textTheme.headline4,
),
],
),
TextButton(
style: ButtonStyle(
backgroundColor:
MaterialStateProperty.resolveWith((states) => Colors.orange)),
child: const Text('Increment Counter',
style: TextStyle(color: Colors.white)),
onPressed: data._incrementCounter,
),
TextButton(
style: ButtonStyle(
backgroundColor:
MaterialStateProperty.resolveWith((states) => Colors.red)),
child: const Text('Decrement Counter',
style: TextStyle(color: Colors.white)),
onPressed: data._decrementCounter,
)
],
));
}
}
class MyInheritedWidget extends InheritedWidget {
final CounterPageState data;
const MyInheritedWidget({
Key? key,
required Widget child,
required this.data,
}) : super(key: key, child: child);
@override
bool updateShouldNotify(InheritedWidget oldWidget) {
return true;
}
}
import 'package:flutter/material.dart';
class CounterPage extends StatefulWidget {
const CounterPage({Key? key, required this.title}) : super(key: key);
final String title;
@override
CounterPageState createState() => CounterPageState();
}
class CounterPageState extends State<CounterPage> {
int _counter = 0;
void _incrementCounter() {
setState(() {
_counter++;
});
}
void _decrementCounter() {
setState(() {
_counter--;
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(child: MyInheritedModel(child: const Counter(), data: this)));
}
}
class Counter extends StatefulWidget {
const Counter({Key? key}) : super(key: key);
@override
CounterState createState() => CounterState();
}
class CounterState extends State<Counter> {
late int counter;
late MyInheritedModel inheritedModel;
@override
Widget build(BuildContext context) {
inheritedModel = MyInheritedModel.of(context);
counter = inheritedModel.data._counter;
return Scaffold(
body: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
'Inherited Counter:',
style: Theme.of(context).textTheme.headline4,
),
Text(
'$counter',
style: Theme.of(context).textTheme.headline4,
),
],
),
TextButton(
style: ButtonStyle(
backgroundColor:
MaterialStateProperty.resolveWith((states) => Colors.orange)),
child: const Text('Increment Counter',
style: TextStyle(color: Colors.white)),
onPressed: inheritedModel.data._incrementCounter,
),
TextButton(
style: ButtonStyle(
backgroundColor:
MaterialStateProperty.resolveWith((states) => Colors.red)),
child: const Text('Decrement Counter',
style: TextStyle(color: Colors.white)),
onPressed: inheritedModel.data._decrementCounter,
)
],
));
}
}
class MyInheritedModel extends InheritedModel<String> {
final CounterPageState data;
const MyInheritedModel({
Key? key,
required Widget child,
required this.data,
}) : super(key: key, child: child);
@override
bool updateShouldNotify(MyInheritedModel old) {
return true;
}
@override
bool updateShouldNotifyDependent(MyInheritedModel old, Set<String> aspects) {
return true;
}
static MyInheritedModel of(BuildContext context, {String aspect = ""}) {
return InheritedModel.inheritFrom<MyInheritedModel>(context,
aspect: aspect)!;
}
}
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
class ProCounter with ChangeNotifier {
int _counter = 0;
int get counter => _counter;
void _incrementCounter() {
_counter++;
notifyListeners();
}
void _decrementCounter() {
_counter--;
notifyListeners();
}
}
class CounterPage extends StatelessWidget {
const CounterPage({Key? key, required this.title}) : super(key: key);
final String title;
@override
Widget build(BuildContext context) {
return MultiProvider(
providers: [ChangeNotifierProvider(create: (_) => ProCounter())],
child: Scaffold(appBar: AppBar(title: Text(title)), body: const Counter()));
}
}
class Counter extends StatelessWidget {
const Counter({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
final counter = Provider.of<ProCounter>(context);
return Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
'Inherited Counter:',
style: Theme.of(context).textTheme.headline4,
),
Text(
'${counter.counter}',
style: Theme.of(context).textTheme.headline4,
),
],
),
TextButton(
style: ButtonStyle(
backgroundColor: MaterialStateProperty.resolveWith(
(states) => Colors.orange)),
child: const Text('Increment Counter',
style: TextStyle(color: Colors.white)),
onPressed: () {
Provider.of<ProCounter>(context, listen: false)
._incrementCounter();
}),
TextButton(
style: ButtonStyle(
backgroundColor:
MaterialStateProperty.resolveWith((states) => Colors.red)),
child: const Text('Decrement Counter',
style: TextStyle(color: Colors.white)),
onPressed: () {
Provider.of<ProCounter>(context, listen: false)
._decrementCounter();
})
],
);
}
}
import 'package:flutter/material.dart';
import 'package:get/get.dart';
class CounterController extends GetxController {
/// (1,2)定义了该变量为响应式变量,当该变量数值变化时,页面的刷新方法将自动刷新
// var counter = 0.obs;
// (3)GetBuilder
var counter = 0;
void incrementCounter() {
counter++;
// (3)使用GetBuilder时手动更新
update();
}
void decrementCounter() {
counter--;
update();
}
}
class CounterPage extends StatefulWidget {
const CounterPage({Key? key, required this.title}) : super(key: key);
final String title;
@override
CounterPageState createState() => CounterPageState();
}
class CounterPageState extends State<CounterPage> {
@override
Widget build(BuildContext context) {
/// 通过依赖注入方式实例化的控制器
final counter = Get.put(CounterController());
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
// 1.
// Obx(() => Text(
// "count的值为:${counter.counter}",
// style: const TextStyle(color: Colors.redAccent, fontSize: 20),
// )),
// 2.
// GetX<CounterController>(
// init: counter,
// builder: (controller) {
// return Text(
// "count的值为:${controller.counter}",
// style: const TextStyle(color: Colors.redAccent, fontSize: 20),
// );
// },
// ),
// 3.
GetBuilder<CounterController>(
builder: (oneController) {
return Text("count的值为: ${oneController.counter}");
},
),
const SizedBox(
height: 30,
),
ElevatedButton(
// 按钮点击count值++
onPressed: () => counter.incrementCounter(),
child: const Text("点击count++"),
),
],
)));
}
}
Flutter 状态管理概述
Flutter状态管理之路(一)
Flutter状态管理之路(二)
Flutter状态管理GetX使用详解