第二百零三回修改组件风格的另外一种方法-优快云博客

本文介绍了在Flutter中，如何使用Theme组件及其data和child属性单独修改组件风格，推荐使用copyWith方法，通过示例展示了如何修改TextButton和Dialog的主题。

文章目录

1. 概念介绍
2. 修改方法
3. 示例代码
4. 内容总结

我们在上一章回中介绍了"三方包bluetooth_enable_fork"相关的内容，本章回中将介绍 修改组件风格的另外一种方法.闲话休提，让我们一起Talk Flutter吧。

1. 概念介绍

我们在这里介绍的组件风格主要指组件的颜色和形状，这些内容可以在程序的主题中进行设置，组件会自动使用当前主题中的配置值。

当然了，有些组件提供了颜色和大小相关的属性，直接通过属性就能修改。有些组件则没有提供修改组件风格的属性，比如官方的AlterDialog组件，它虽然提供了一些修改组件风格的属性，但是范围有限。如果我们想单独修改该组件的风格只能通过修改主题来实现，但是主题是所有组件共用的内容，不能因为修改单个组件的风格就去修改程序的主题，那么怎么办呢？本章回中将介绍一种单独修改组件风格的方法。

2. 修改方法

我们使用Theme组件来修改组件风格，该组件提供了两个属性，通过这两个属性可以单独控制某个组件的风格，详细如下：

child属性：它是子组件的容器，用来存放子组件；
data属性：主要用来控制组件的主题，也就是child属性中组件的主题；

两个属性需要同时使用才有效果，我们可以这样理解：Theme组件类似一个容器，它可以包裹一个子组件，然后通过它的data属性来修改子组件的主题风格。

此外，在给data属性赋值时可以直接创建一个ThemeData对象，或者使用它的copyWith()方法。我推荐使用copyWith()方法，因为它会复制组件原来的主题，我们只需要修改主题中的一部分就可以，被修改的内容只是主题的一部分，它也正是我们想要修改的内容。这种方法既可以修改我们想要修改的内容，又保持了主题中其它的内容的原貌。

3. 示例代码

Theme(
  data: themeData.copyWith(
    textTheme: const TextTheme(
      displayLarge: TextStyle(color: Colors.purpleAccent),
      displayMedium: TextStyle(color: Colors.blue),
      displaySmall: TextStyle(color: Colors.greenAccent),
      titleLarge: TextStyle(color: Colors.purpleAccent),
      titleMedium: TextStyle(color: Colors.purpleAccent),
      titleSmall: TextStyle(color: Colors.purpleAccent),
    ),
    textButtonTheme: TextButtonThemeData(
     style: TextButton.styleFrom(foregroundColor: Colors.greenAccent,textStyle: const TextStyle(color: Colors.redAccent,),),
    ),
    dialogBackgroundColor: Colors.redAccent,
    ///只有这个起作用，其它的都不起作用，估计嵌套导致的
    elevatedButtonTheme: ElevatedButtonThemeData(
        style:ElevatedButton.styleFrom(foregroundColor: Colors.redAccent,), ),
    dialogTheme: const DialogTheme(
      backgroundColor: Colors.redAccent,
      contentTextStyle: TextStyle(color: Colors.redAccent,),
    ),
    primaryColor: Colors.greenAccent,

  ),
  child: ElevatedButton(
    onPressed: (){
      BluetoothEnable.customBluetoothRequest(
          context, dialogTitle,
          true, dialogContent,
          cancelBtnText, acceptBtnText,
          dialogRadius, barrierDismissible);
    },
    child: const Text("Open BT by Dialog"),
  ),
)