构造函数在 flutter 上不能正常工作

Question

我创建了一个名为 Size

的 class

Class 姓名：尺码

输入代码

import 'package:flutter/material.dart';
import 'package:firstapp/pages/components/font.dart';

// ignore: must_be_immutable
class Size extends StatefulWidget {
  double font = sizevar.fontSizeRatio;
  double fontH = sizevar.fontSizeRatioH;
  Size();

  @override
  _SizeState createState() => _SizeState();
}

class _SizeState extends State<Size> {
  void initState() {
    sizevar.fontSizeRatio = 25;
    sizevar.fontSizeRatioH = 30;

    super.initState();
  }

  _SizeState();

  @override
  Widget build(BuildContext context) {
    return Row(
      children: [
        IconButton(
          onPressed: () => setState(() {
            sizevar.fontSizeRatio = sizevar.fontSizeRatio - 2;
          }),
          icon: Icon(Icons.remove_circle_outline, color: Colors.red),
        ),
        IconButton(
            onPressed: () => setState(() {
                  sizevar.fontSizeRatio = sizevar.fontSizeRatio + 2;
                }),
            icon: Icon(Icons.add_circle_outlined, color: Colors.red)),
      ],
    );
  }
}

上面的代码用于每天调整文本的字体大小。我想在其他 class 上使用它，例如 class 命名为 SizeCheck。

class 名称：SizeCheck

输入代码

import 'package:firstapp/pages/components/body.dart';
import 'package:firstapp/pages/components/bodyTitle.dart';
import 'package:firstapp/pages/components/font.dart';
import 'package:firstapp/pages/components/size.dart';
import 'package:flutter/material.dart';

class SizeCheck extends StatefulWidget {
  @override
  State<SizeCheck> createState() => SizeCheckState();
}

class SizeCheckState extends State<SizeCheck> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Resize",
            style: TextStyle(
              fontSize: sizevar.fontSizeRatio,
            )),
        **actions: [Size()],**
      ),
      body: ListView(
        children: <Widget>[
          Column(
            children: [
              BodyTitle("Title"),
              ContentBody('how we resize the text'),
            ],
          ),
        ],
      ),
    );
  }
}

当我按下按钮时，文本大小没有立即改变 img when i press the button ，但是当我热重载模拟器时它可以工作。 img after hot reload the emulator 我正在使用 flutter v2.5.

Answer 1

我不确定 sizevar 是什么，但这是发生此问题的原因以及解决方法：

问题非常简单，您正在更新值，但您没有告诉 SizeCheck 重建自身，为此，您必须从内部调用 setState SizeCheck 从 Size 调用它是不够的。

要解决此问题，我建议您将回调添加到 Size，如下所示：

class Size extends StatefulWidget {
  double font = sizevar.fontSizeRatio;
  double fontH = sizevar.fontSizeRatioH;

  VoidCallback? onSizeIncrease;
  VoidCallback? onSizeDecrease;
  
  Size({required this.onSizeIncrease, required this.onSizeDecrease});

  @override
  _SizeState createState() => _SizeState();
}

然后Size的状态：

IconButton(
          onPressed: onSizeDecrease,
          icon: Icon(Icons.remove_circle_outline, color: Colors.red),
        ),
        IconButton(
            onPressed: onSizeIncrease,
            icon: Icon(Icons.add_circle_outlined, color: Colors.red)),

这样您就可以在 SizeCheck 小部件上调用它们：

actions: [Size(
  onSizeIncrease: () => setState(() {
            sizevar.fontSizeRatio = sizevar.fontSizeRatio + 2;
          }),
  onSizeDecrease: () => setState(() {
            sizevar.fontSizeRatio = sizevar.fontSizeRatio - 2;
          }),
)]

构造函数在 flutter 上不能正常工作

constructor doesn't work properly on flutter

constructor

class

widget

flutter

statefulwidget