Flutter - 使用Provider在全局范围内更改字体大小

Question

我正在尝试在我的Flutter应用程序中使用Provider，以允许用户更改某些小部件的字体大小。

我正在按照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()中，但我已经将我的部件分离出来，以尝试使一切更清洁 - 这是什么造成了差异吗？

- Malcolm Whild

---

嘿，伙计，请分享你的代码。我无法更改大小。 - Priyank

@Priyank - 当然可以，但是在评论中没有足够的空间来放置完整的代码。最好如何分享？当您点击调整大小按钮时会发生什么？ - Malcolm Whild

Answer 1

在你的小部件中不需要使用变量（删除_standardSize）。

只需将值保留在你的ChangeNotifier中，并直接使用它（通过getter）：

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

- Yann39

---

请解释一下为什么要点踩...这个解决方案已经经过测试，运行良好，而且比使用不必要的变量要好得多。 - Yann39

非常感谢您抽出时间回答这个问题。我也不确定为什么您的答案会被踩。您说得没错，确实不需要传递_standardSize变量，而且您的方法似乎与https://github.com/flutter/samples/blob/master/provider_counter/lib/main.dart中推荐的方法相一致。在我的情况下，我需要更改的是ChangeNotifierProvider小部件的位置。我被不污染作用域所分心，并将其放置在UI问题小部件中，而不是主要部件中。 - Malcolm Whild

如果您使用Provider.of，那么您的ChangeNotifierProvider必须移动到祖先小部件（可以是主要小部件）。我在我的答案中使用Provider.of来检索值，但是如果您更喜欢使用Consumer（特别是如果您需要更具体的小部件重建），那么您当然可以继续使用它，在这种情况下，您不需要将您的ChangeNotifierProvider移动到主要小部件。这完全取决于您的应用程序结构以及您需要访问提供程序数据的位置。 - Yann39

@Yann39 我认为 listen 应该是 true：在 fontSize 中：Provider.of<FontSizeController>(context, listen: false).value - iamnabink

@iamnabink 确实 :) - Yann39