flutter - 颤振 - 使用提供者全局更改字体大小
问题描述
我正在尝试在我的颤振应用程序中使用提供程序来允许用户更改某些小部件的字体大小。
我正在遵循 github.com/flutter/samples/blob/master/provider_counter/lib/main.dart 中描述的方法,但字体大小没有改变。
我有一个显示加号和减号按钮的 UI 小部件:
import "package:flutter/material.dart";
import './size_controller.dart';
import 'package:provider/provider.dart';
class TypeSize extends StatelessWidget {
final _standardSize = 20.0;
@override
Widget build(BuildContext context) {
return Container(
padding: EdgeInsets.all(20.0),
child: Row(
children: <Widget>[
Text(
"Change type size: ",
style: TextStyle(fontSize: _standardSize),
),
ButtonTheme(
minWidth: 50,
child: RaisedButton(
onPressed: () {
if (_standardSize < 23.0) {
Provider.of<FontSizeController>(context, listen: false).increment(_standardSize);
}
},
child: Text(
"+", style: TextStyle(
color: Colors.white,
fontSize: 30),
),
color: Colors.green,
),
),
ButtonTheme(
minWidth: 50,
child: RaisedButton(
onPressed: () {
if (_standardSize > 20.0) {
Provider.of<FontSizeController>(context, listen: false).decrement(_standardSize);
}
},
child: Text(
"-", style: TextStyle(
color: Colors.white,
fontSize: 30,
),
),
color: Colors.green,
),
),
],
),
);
}
}
FontSizeController 看起来像这样:
import 'package:flutter/material.dart';
class FontSizeController with ChangeNotifier {
double value = 20.0;
void increment(value) {
value ++;
notifyListeners();
}
void decrement(value) {
value --;
notifyListeners();
}
}
最后,我要更改的小部件如下所示:
import 'package:flutter/material.dart';
// import 'package:wfa_ambo_bloc/main.dart';
import 'package:provider/provider.dart';
import '../controllers/size_controller.dart';
class Comfort extends StatefulWidget {
@override
_ComfortState createState() => _ComfortState();
}
class _ComfortState extends State<Comfort> {
int _comfortSliderValue = 3;
// double _standardSize = 20;
@override
Widget build(BuildContext context) {
return Container(
margin: EdgeInsets.only(bottom: 40),
child: Column(
children: <Widget>[
Align(
alignment: Alignment.centerLeft,
child: ChangeNotifierProvider(
create: (context) => FontSizeController(),
child: Container(
padding: EdgeInsets.all(20.0),
child: Consumer<FontSizeController>(
builder: (
context,
sizeController,
child) => Text(
"How comfortable was your journey?",
textAlign: TextAlign.left,
style: TextStyle(
fontWeight: FontWeight.w400,
fontFamily: "Roboto",
letterSpacing: 0.5,
fontSize: sizeController.value,
),
),
),
),
),
),
... etc
单击按钮时没有任何反应。有人可以帮忙吗?
我试图适应的示例都包含在 main() 中,但我已经分离出我的小部件以尝试使所有内容都更清洁 - 这就是造成差异的原因吗?
解决方案
无需在小部件中使用变量(删除_standardSize
)。
只需保留您的价值ChangeNotifier
并直接使用它(通过吸气剂):
import 'package:flutter/material.dart';
class FontSizeController with ChangeNotifier {
double _value = 20.0;
int get value => _value;
void increment() {
_value++;
notifyListeners();
}
void decrement() {
_value--;
notifyListeners();
}
}
然后在加号和减号按钮上,只需增加或减少您的值ChangeNotifier
:
// on plus button pressed
Provider.of<FontSizeController>(context, listen: false).increment();
// on minus button pressed
Provider.of<FontSizeController>(context, listen: false).decrement();
最后在您希望调整文本大小的小部件中:
fontSize: Provider.of<FontSizeController>(context, listen: true).value
推荐阅读
- colors - WebStorm 2018.3:项目工具窗口颜色?
- php - 单击复选框时显示多个值?
- html - 从 curl 输出字符串的一部分中提取和使用变量
- java - 从具有奇数项的给定数组中找到不重复的整数
- java - 如何向光束 FileIO.matchAll() 结果添加附加字段?
- java - org.xml.sax.SAXParseException 尝试使用标准验证器和 xsd 进行验证?
- database - 如何在 laravel 中自动将数据库从 mysql 更改为 mongodb
- sqlite - 每次滚动时都会调用 Recyclerview 中的方法
- python - 如何检查列表中是否存在字符序列?
- node.js - UnhandledPromiseRejectionWarning: ReferenceError: adb is not defined