flutter - 如何在 Flutter 中实时更改我的应用程序中不同文本的文本大小

Question

在我的应用程序中，我为不同的目的制作了自定义 TextStyles。我为它们各自的大小制作了变量并像这样初始化它们 -

double fontSize1=24;
double fontSize2=20;
double fontSize3=18;
double bodyText1Size=16;
double bodyText2Size=14;
double bodyText3Size=12;
double buttonTextStyleSize=16;
double linkStyleSize=12;

var headingStyle1 = TextStyle(
  fontSize: fontSize1,
  fontWeight: FontWeight.bold,
  color: Colors.black,
);

var headingStyle2 = TextStyle(
  fontSize: fontSize2,
  fontWeight: FontWeight.bold,
  color: Colors.black,
);

var headingStyle3 = TextStyle(
  fontSize: fontSize2,
  fontWeight: FontWeight.w600,
  color: Colors.black,
);

var headingStyle4 = TextStyle(
  fontSize: fontSize3,
  fontWeight: FontWeight.w600,
  color: Colors.black,
);

var bodyText1 = TextStyle(
  fontSize: bodyText1Size,
  fontWeight: FontWeight.w400,
  color: Colors.black,
);

var bodyText2 = TextStyle(
  fontSize: bodyText2Size,
  fontWeight: FontWeight.w400,
  color: Colors.black,
);

var bodyText3 = TextStyle(
  fontSize: bodyText3Size,
  fontWeight: FontWeight.w400,
  color: tertiaryTextColor,
);

var buttonTextStyle = TextStyle(
  fontSize: buttonTextStyleSize,
  fontWeight: FontWeight.bold,
  color: Colors.black,
);

var linkStyle = TextStyle(
  fontSize: linkStyleSize,
  fontWeight: FontWeight.w600,
  color: Colors.black,
);

然后，在我的 Material App 的 TextTheme 的 main.dart 中使用它们，就像这样 -

textTheme: TextTheme(
            headline1: headingStyle1,
            headline2: headingStyle2,
            headline3: headingStyle3,
            headline4: headingStyle4,
            headline6: bodyText3,
            bodyText1: bodyText1,
            bodyText2: bodyText2,
            button: buttonTextStyle,
            caption: linkStyle,
          ),

现在，我在我的应用程序中到处都在使用它，例如 -

Text(
    "These settings will be applied all across the app",
    style: Theme.of(context)
    .textTheme
    .bodyText2!
    .apply(color: tertiaryTextColor),
),

现在，我想从我的 UI 更改它们的大小，为此我创建了两个 Button 并在其中，只是现在我增加/减小了它们的大小。我使用 setState 像这样更改它们的大小 -

InkWell(
      onTap: () {
        setState(() {
          fontSize1--;
          fontSize2--;
          fontSize3--;
        });
        print("Font Sizes increased by 1");
        print("Font Sizes 1 = $fontSize1");
        print("Font Sizes 2 = $fontSize2");
        print("Font Sizes 3 = $fontSize3");
     },
     child: Text(
        "-",
        style: Theme.of(context)
        .textTheme
        .headline2!
        .apply(color: secondaryTextColor),
     ),
 ),

现在，在我的日志中，正如我打印的那样，它们的大小在变化，但 UI 没有变化。为什么？你能告诉我一个解决方案吗？

Answer 1

您可以使用 .copy 调用 textTheme 并更改您想要的内容，例如颜色或大小或......等

Text(
"These settings will be applied all across the app",
style: Theme.of(context)
.textTheme
.bodyText2!
// .apply(color: tertiaryTextColor), comment this
.copyWith(color: tertiaryTextColor),  // add this line for color attribute or any else
),