flutter - 在应用程序中普遍设置颜色为文本小部件，而无需每次都在小部件内提及主题

Question

我不熟悉 flutter 和尝试事物。

我将 Scaffold Widget 替换为 Center Widget(只是胡闹)。所有文本都有黄色下划线，为了克服这个问题，我使用了 TextDecoration

Text(
    friend.name,
    style: TextStyle(
        decoration: TextDecoration.none
    ),
));

但这对所有文本小部件都是必需的，因此我尝试通过在根 MaterialApp 中设置主题数据来为所有文本小部件设置它。

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp( 
      title: 'Friends List',
      theme: ThemeData(
        primaryColor: Colors.black,
        primarySwatch: Colors.teal,
        primaryTextTheme: TextTheme(
          headline1: TextStyle(color: Colors.green, decoration: TextDecoration.none),
         headline2: TextStyle(color: Colors.green, decoration: TextDecoration.none),
         headline3: TextStyle(color: Colors.green, decoration: TextDecoration.none),
         headline4: TextStyle(color: Colors.green, decoration: TextDecoration.none),
         headline5: TextStyle(color: Colors.green, decoration: TextDecoration.none),
         headline6: TextStyle(color: Colors.green, decoration: TextDecoration.none),
         bodyText1: TextStyle(color: Colors.green, decoration: TextDecoration.none),
         bodyText2: TextStyle(color: Colors.green, decoration: TextDecoration.none),
        ),
        textTheme: TextTheme(
         headline1: TextStyle(decoration: TextDecoration.none),
         headline2: TextStyle(decoration: TextDecoration.none),
         headline3: TextStyle(decoration: TextDecoration.none),
         headline4: TextStyle(decoration: TextDecoration.none),
         headline5: TextStyle(decoration: TextDecoration.none),
         headline6: TextStyle(decoration: TextDecoration.none),
         bodyText1: TextStyle(decoration: TextDecoration.none),
         bodyText2: TextStyle(decoration: TextDecoration.none)
        ),
        ),
      home: MyHomePage(title: 'Friends list'),
    );
  }
}

但 Text 小部件仍然作为下划线。我正在尝试的是类似于在 css 中为标签设置样式，而不必每次都设置它。

p
{
    universal style here
}

我做错了什么吗？ flutter.js 有类似的支持吗？如有不妥请指正

Answer 1

不要将静态常量用于全局样式。使用 InheritedWidgets 以 flutter 的方式进行.这样，如果需要，您可以轻松地覆盖树的特定分支的默认样式。

那么，使用什么来全局设置文本小部件的样式？

你需要定义TextTheme对于ThemeData全局设置文本小部件的样式。此外，用户可以使用 DefaultTextStyle小部件主题小部件树的一部分。

根据文档，

The text style to apply to descendant Text widgets without explicit style.

将它放在您的小部件树的根部。

示例:

DefaultTextStyle(
          style: TextStyle(fontSize: 36, color: Colors.blue),
         // child: other widgets
   )

这是一个完整的工作示例，说明了以下内容

1. 为所有文本小部件定义默认文本样式

2. 覆盖树的特定分支上的默认文本样式。

     import 'package:flutter/material.dart';
   
     void main() {
     runApp(MyApp());
   }
   
   class MyApp extends StatelessWidget {
     @override
     Widget build(BuildContext context) {
       return MaterialApp(
         theme: ThemeData.dark().copyWith(scaffoldBackgroundColor: Colors.white),
         debugShowCheckedModeBanner: false,
         home: Scaffold(
           ///This style will be applied to all the TextWidgets below.
           body: DefaultTextStyle(
             style:
                 Theme.of(context).textTheme.headline6.copyWith(color: Colors.red),
             child: Center(
               child: MyWidget(),
             ),
           ),
         ),
       );
     }
   }
   
   class MyWidget extends StatelessWidget {
     @override
     Widget build(BuildContext context) {
       return Column(
         children: <Widget>[
           ///This text will be in red color
           Text('Hello, World!'),
           DefaultTextStyle(
             style:
                 DefaultTextStyle.of(context).style.copyWith(color: Colors.blue),
   
             ///We don't need to place Text widget as direct child of
             ///DefaultTextStyle. This is the proof.
             child: Container(
               ///Just another widget
               child: Container(
                 ///This text will be in blue color
                 child: Text('Hello, World!'),
               ),
             ),
           ),
           DefaultTextStyle(
             style:
                 DefaultTextStyle.of(context).style.copyWith(color: Colors.green),
   
             ///This text will be in green color
   
             child: Text('Hello, World!'),
           ),
         ],
       );
     }
   }
   

查看现场演示 here .

---

您可以找到详细的答案here关于颜色和主题。