如何使用“copiedWith”TextStyle 设置文本小部件的样式，并使 ExpansionTile 'textColor' 和 'collapsedTextColor' 属性起作用？

Question

我无法使 ExpansionTile 'textColor' 和 'collapsedTextColor' 属性与使用我在 Flutter 中使用“copyWith”创建的一些 TextStyle 进行样式设置的文本小部件一起使用。

这是一个例子：

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'ExpansionTile/Text color bug',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(title: 'ExpansionTile/Text color bug main page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});
  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    TextStyle aTextStyle = Theme.of(context)
        .textTheme
        .bodyMedium!
        .copyWith(fontStyle: FontStyle.italic);
    
    // If you comment out the following line, the text gets from white to black.
    // It never gets orange/blue as expected.
    aTextStyle = _copyUnsettingColor(aTextStyle);

    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
      ),
      body: ListView(
        children: [
          const ExpansionTile(
            title: Text('Unstyled text'),
            textColor: Colors.amber,
            collapsedTextColor: Colors.blue,
          ),
          ExpansionTile(
            title: Text(
              'Styled text',
              style: aTextStyle,
            ),
            textColor: Colors.amber,
            collapsedTextColor: Colors.blue,
          ),
        ],
      ),
    );
  }

  TextStyle _copyUnsettingColor(TextStyle style) {
    final TextStyle uncoloredStyle = TextStyle(
      debugLabel: style.debugLabel,
      decoration: style.decoration,
      decorationStyle: style.decorationStyle,
      decorationThickness: style.decorationThickness,
      fontFamily: style.fontFamily,
      fontFamilyFallback: style.fontFamilyFallback,
      fontFeatures: style.fontFeatures,
      fontSize: style.fontSize,
      fontStyle: style.fontStyle,
      fontVariations: style.fontVariations,
      fontWeight: style.fontWeight,
      height: style.height,
      inherit: style.inherit,
      leadingDistribution: style.leadingDistribution,
      letterSpacing: style.letterSpacing,
      locale: style.locale,
      overflow: style.overflow,
      shadows: style.shadows,
      textBaseline: style.textBaseline,
      wordSpacing: style.wordSpacing,
    );
    return uncoloredStyle;
  }
}

如您所见，第一个 ExpansionTile 文本的颜色由 ExpansionTile textColor 和 collapsedTextColor 属性定义。

第二个没有。

_copyUnsettingColor 方法是尝试使 ExpansionTile textColor 和 collapsedTextColor 属性起作用的最后一个资源体验，但它只是将文本的颜色从黑色更改为白色，而不是我期望的橙色/蓝色。

Answer 1

直接在样式化

TextStyle

小部件的

TextField

属性中指定

style

。这样，它将合并您在此处设置的样式与来自

ExpansionTile

:

的其他设置

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'ExpansionTile/Text color bug',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(title: 'ExpansionTile/Text color bug main page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});
  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {    
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
      ),
      body: ListView(
        children: [
          const ExpansionTile(
            title: Text('Unstyled text'),
            textColor: Colors.amber,
            collapsedTextColor: Colors.blue,
          ),
          ExpansionTile(
            title: Text(
              'Styled text',
              style: TextStyle(fontStyle: FontStyle.italic),
            ),
            textColor: Colors.amber,
            collapsedTextColor: Colors.blue,
          ),
        ],
      ),
    );
  }
}