Flutter:如何将文本的行高属性设置为 ThemeData

Question

如何在 ThemeData 中全局设置行高？

theme: ThemeData(
       brightness: Brightness.light,
       accentColor: myAccentColor,
       primaryColor: myPrimaryColor,
       fontFamily: 'Ubuntu',
       buttonTheme: ThemeData.light().buttonTheme.copyWith(
            buttonColor: myPrimaryColor,
            textTheme: ButtonTextTheme.primary,
            shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(5)),
       ),
       scaffoldBackgroundColor: myBackgroundWhite,
       cardColor: myBackgroundWhite,
       textSelectionColor: myGreyTextColor,
       cursorColor: myAccentColor,
       cupertinoOverrideTheme: CupertinoThemeData(
          primaryColor: myAccentColor,
       ),
       errorColor: myErrorColorRed,
)

Answer 1

我们不能直接从 ThemeData 设置 line-height(属性名称:height)。

处理文本样式的最佳做法是使用 Material 类型系统指南。请参阅 here. 中的“Material Text Scale:现代化 Flutter Text Theming”部分

那么在全局ThemeData上，你可以使用

theme: ThemeData(
          brightness: Brightness.light,
          accentColor: flujoAccentColor,
          primaryColor: flujoPrimaryColor,
          fontFamily: 'FiraSans',
          textTheme: TextTheme(
              headline5: TextStyle(
                fontSize: 24.0,
                fontWeight: FontWeight.w700,
                fontStyle: FontStyle.normal,
              ),
              bodyText1: TextStyle(
                fontSize: 16.0,
                fontStyle: FontStyle.normal,
                letterSpacing: 0.5,
              ),
              bodyText2: TextStyle(
                fontSize: 14.0,
                fontStyle: FontStyle.normal,
                letterSpacing: 0.25,
                height: 1.5,
              ),
              subtitle1: TextStyle(
                fontSize: 16.0,
                fontStyle: FontStyle.normal,
                letterSpacing: 0.15,
              ),
              subtitle2: TextStyle(
                fontSize: 14,
                fontWeight: FontWeight.w400,
                fontStyle: FontStyle.normal,
              ),
              caption: TextStyle(
                fontSize: 12,
                fontWeight: FontWeight.w400,
                fontStyle: FontStyle.normal,
              ),
              overline: TextStyle(
                fontSize: 10,
                fontWeight: FontWeight.w400,
                letterSpacing: 0.25,
                height: 1.5,
                fontStyle: FontStyle.normal,
              )),

像这样在 Text 小部件上，像这样应用它:

Text(
    "Hello world!",
     style: Theme.of(context).textTheme.bodyText1.copyWith(color: Colors.teal,),
);