面试题：Flutter Material Design主题中如何实现响应式字体大小

Question

在Flutter Material Design主题定制过程中，考虑到不同设备屏幕尺寸和分辨率，怎样实现字体大小能够自适应变化，并且符合Material Design规范，同时说明如何在主题中配置相关的字体参数。

Answer 1

实现字体大小自适应变化且符合Material Design规范的方法

1. 使用MediaQuery：
   • Flutter提供了MediaQuery类，可以获取设备的尺寸信息。通过MediaQuery.of(context).size可以获取设备屏幕的宽度和高度。
   • 例如，可以根据屏幕宽度来动态调整字体大小。一种常见的做法是，定义一个基准字体大小（比如在设计稿上针对某一标准尺寸屏幕定义的字体大小），然后根据屏幕宽度的比例来缩放字体大小。
   • 示例代码：

   double baseFontSize = 16; // 基准字体大小
   double screenWidth = MediaQuery.of(context).size.width;
   double fontSize = baseFontSize * (screenWidth / 360); // 假设基准屏幕宽度为360
   

2. TextTheme与Typography：
   • Material Design规范通过TextTheme和Typography来管理字体样式。Typography定义了不同文本类型（如标题、副标题、正文等）的字体特征。
   • TextTheme则是一个包含不同文本样式的集合，它基于Typography进行配置。例如，TextTheme中的headline1、bodyText1等样式都有其对应的Material Design规范。
   • 在Flutter中，默认的TextTheme已经遵循Material Design规范。要使字体大小自适应，可结合上述MediaQuery的方式来调整TextTheme中的字体大小。

在主题中配置相关字体参数

1. 定义自定义TextTheme：
   • 可以通过TextTheme类来创建自定义的文本主题。例如：

   TextTheme customTextTheme = TextTheme(
     headline1: TextStyle(
       fontSize: 96,
       fontWeight: FontWeight.w300,
       letterSpacing: -1.5,
     ),
     bodyText1: TextStyle(
       fontSize: 16,
       fontWeight: FontWeight.normal,
       letterSpacing: 0.5,
     ),
   );
   

2. 应用到主题：
   • 在MaterialApp的theme属性中应用自定义的TextTheme。

   MaterialApp(
     theme: ThemeData(
       textTheme: customTextTheme,
     ),
     home: Scaffold(
       appBar: AppBar(
         title: Text('Custom Theme'),
       ),
       body: Center(
         child: Text('Hello, World!'),
       ),
     ),
   );
   

3. 结合自适应字体大小：
   • 将前面通过MediaQuery计算出的字体大小应用到TextTheme的相应样式中。

   double baseFontSize = 16;
   double screenWidth = MediaQuery.of(context).size.width;
   double bodyTextFontSize = baseFontSize * (screenWidth / 360);
   TextTheme customTextTheme = TextTheme(
     bodyText1: TextStyle(
       fontSize: bodyTextFontSize,
       fontWeight: FontWeight.normal,
       letterSpacing: 0.5,
     ),
   );
   

   • 然后按照上述方式应用到ThemeData中。这样就实现了在主题中配置自适应且符合Material Design规范的字体参数。