在 Flutter 上创建自定义 TextStyle class

Question

如何在 flutter 中创建自定义 TextStyle class？例如，我有几个按钮，希望里面的文本都具有相同的 fontSize 和颜色，但我不想在每个 Text 小部件中重复 TextStyle，而是创建诸如 CustomTextStyle 之类的东西，我可以用它来代替TextStyle 本身。有办法吗？

Answer 1

创建一个单独的 class 名称 CustomTextStyle 并在其中添加样式，例如：

class CustomTextStyle {
  static const TextStyle nameOfTextStyle = TextStyle(
    fontSize: 24,
    color: Colors.green,
    fontWeight: FontWeight.bold,
  );
}

现在您可以在文本小部件中使用它，例如：

Text('Lorem Ipsum',
   style: CustomTextStyle.nameOfTextStyle,
)

Answer 2

要全局定义按钮或文本样式，您需要使用主题。

例如，您可以为 TextButton 定义自定义主题：

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

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        textButtonTheme: TextButtonThemeData(
          style: ButtonStyle(
            textStyle: MaterialStateProperty.all(
              const TextStyle(fontSize: 20),
            ),
          ),
        ),
        [...]

Answer 3

可以通过三种方式做到这一点：

使用主题：

您可以根据小部件在主题中单独声明多个TextStyle，例如AppBar 的 TitleTextTheme、AppBar 的 ToolbarTextTheme、Button 的 TextTheme、整个应用程序的常规 TextTheme，或基于 ThemeMode，例如Dark Mode或Light mode，你可以结合这两种Widgets based和ThemeModes based。

为此，创建一个名为 ThemeModel 的 class，例如，在其中创建 ThemeData 变量，您将在其中声明这些 TextThemes 并在 MaterialApp 在 main.dart 作为
```
MaterialApp(
  ...,
  theme: ThemeModel().lightMode,
  darkTheme: ThemeModel().darkMode,
)
```

使用自定义文本小部件。

const CustomText extends StatelessWidget {
final String text;
const CustomText(this.text, {Key? key}): super(key:key);  

@override
Widget build(BuildContext context) {
  return Text(
    text,
    style: TextStyle(
      color: YourColor,
      fontSize: YourSize,
      fontWeight: YourFontWeight
    ),
  );

并将其用作，

ElevatedButton(
  onPressed: (){},
  child: CustomText('Click Me'),
)

这样 TextStyle 将在您使用此小部件的任何地方保持不变。

使用自定义 TextStyle:

class CustomTextStyle {
  static const TextStyle textStyle = TextStyle(
    color: YourColor,
    fontSize: YourSize,
    fontWeight: YourFontWeight
  );
}

并用作：

ElevatedButton(
  onPressed: (){},
  child: Text('Click Me', 
    style: CustomTextStyle.textStyle,
  ),
)

希望您了解这些方法中的每一种都有自己的实用程序，并且可以进一步自定义以简化您的应用程序开发。

在 Flutter 上创建自定义 TextStyle class

Create custom TextStyle class on Flutter

flutter

flutter-animation