2

我是新来的颤振和尝试的东西。

我用 Center Widget 替换了 Scaffold 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
}

我做错什么了吗？颤振中是否有类似的支持。如果我在拧，请纠正我

4

2 回答 2

6

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

那么，如何在全局范围内设置文本小部件的样式？

您需要为 ThemeData 定义TextTheme以全局设置 Text 小部件的样式。此外，用户可以使用DefaultTextStyle小部件为小部件树的一部分设置主题。

根据文档，

应用于没有明确样式的后代文本小部件的文本样式。

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

例子：

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

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

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

  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!'),
        ),
      ],
    );
  }
}

在此处查看现场演示。

您可以在此处找到有关颜色和主题的详细答案。

于 2020-02-26T11:58:27.597 回答
1

为所有文本样式创建一个类，如下所示：

class AppTheme {

static final primaryFontFamily = "GT Walsheim";

static TextStyle homeScreenBoldStyle() {
    return TextStyle(
        fontFamily: AppTheme.primaryFontFamily,
        fontSize: 16,
        fontWeight: FontWeight.bold,
        color: Colors.white);
  }
}

并像这样调用这个类：

Text(trainingType.name,
                      style: AppTheme.homeScreenBoldStyle()),
于 2020-02-26T12:02:57.397 回答