问题

我有一个名为text_styles.dart的文件，其中包含许多不带类或其他内容的不同TextStyles，如下所示：

```dart
TextStyle subheadingTextStyle = TextStyle(
  color: blackColor,
  fontSize: 20.0,
  height: 1.7);

我在其他文件中使用以下方式调用这个TextStyle：
style: subheadingTextStyle

现在我想根据屏幕大小调整字体大小，就像这里描述的那样：https://stackoverflow.com/questions/72659826/flutter-fontsize-in-web

所以我更改了我的subheadingTextStyle：

TextStyle subheadingTextStyle = TextStyle(
  color: blackColor,
  fontSize: Responsive.isDesktop(context)
      ? 20
      : Responsive.isTablet(context)
      ? 15
      : 10,
  height: 1.7);

但我收到一个错误，指出context未定义（因为我尝试在其范围之外访问context）。

如何修复这个问题？还有没有其他更好的方法根据屏幕大小动态调整字体大小？

<details>
<summary>英文:</summary>

I&#39;ve got a file called text_styles.dart which contains many different TextStyles like that (without a class or something else):

TextStyle subheadingTextStyle = TextStyle(
color: blackColor,
fontSize: 20.0,
height: 1.7);

I call this TextStyle in other files with 
`style: subheadingTextStyle`

Now I want to resize the font size depending on the screen size like described here: https://stackoverflow.com/questions/72659826/flutter-fontsize-in-web

So I changed my subheadingTextStyle:

TextStyle subheadingTextStyle = TextStyle(
color: blackColor,
fontSize: Responsive.isDesktop(context)
? 20
: Responsive.isTablet(context)
? 15
: 10,
height: 1.7);

But I get an error that the context is undefined (because I try to access context outside of its scope). 

What's the best way to fix that? Or is there any other (better?) way to dynamically resize the font size depending on the screen size?

</details>


# 答案1
**得分**: 0

以下是翻译好的代码部分：

```dart
如果您想要使用您所描述的方法，那么您需要按照以下方式处理：

TextStyle subheadingTextStyle = TextStyle(
  color: Colors.black,
  fontSize: 20.0,
  height: 1.7,
);

class HomePage extends StatelessWidget {
  const HomePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Text(
      'Hello!',
      style: subheadingTextStyle.copyWith(
        fontSize: Responsive.isDesktop(context)
            ? 20
            : Responsive.isTablet(context)
                ? 15
                : 10,
      ),
    );
  }
}

class Responsive {
  static bool isMobile(BuildContext context) =>
      MediaQuery.of(context).size.width < 730;

  static bool isTablet(BuildContext context) =>
      MediaQuery.of(context).size.width < 1190 &&
      MediaQuery.of(context).size.width >= 730;

  static bool isDesktop(BuildContext context) =>
      MediaQuery.of(context).size.width >= 1190;
}

希望这对您有所帮助。

TextStyle subheadingTextStyle = TextStyle(
  color: Colors.black,
  fontSize: 20.0,
  height: 1.7,
);

class HomePage extends StatelessWidget {
  const HomePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Text(
      'Hello!',
      style: subheadingTextStyle.copyWith(
        fontSize: Responsive.isDesktop(context)
            ? 20
            : Responsive.isTablet(context)
                ? 15
                : 10,
      ),
    );
  }
}

class Responsive {
  static bool isMobile(BuildContext context) =>
      MediaQuery.of(context).size.width < 730;

  static bool isTablet(BuildContext context) =>
      MediaQuery.of(context).size.width < 1190 &&
      MediaQuery.of(context).size.width >= 730;

  static bool isDesktop(BuildContext context) =>
      MediaQuery.of(context).size.width >= 1190;
}