ShaderMask 关于文本渐变的问题

Question

我想对文本应用渐变。下面的代码可以正常工作，直到我指定

height: 1

。

由于某种原因，着色器不适用于文本的底部部分（请参见“y”字母底部的黑色凹口）。

我认为问题在于

height

参数影响

bounds

。

但是如果我在

shaderCallback

中指定更大的值，它不会影响结果。

有什么想法如何将渐变应用于文本，即使具有任何

height

值？

未指定

height

height: 1

import 'package:flutter/material.dart';

void main() {
  WidgetsFlutterBinding.ensureInitialized();
  runApp(const MyApp());
}

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

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(body: Body()),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    const style = TextStyle(
      fontSize: 48,
      fontWeight: FontWeight.bold,
      color: Colors.black,
      height: 1,
    );
    return Center(
      child: ShaderMask(
        blendMode: BlendMode.srcIn,
        shaderCallback: (bounds) => _gradient.createShader(bounds),
        child: const Text('Why?', style: style),
      ),
    );
  }
}

const _gradient = LinearGradient(colors: [Colors.red, Colors.red]);

Answer 1

您可以使用

strutStyle

代替

style

，仅用于

height

。

const Text(
          'Why?',
          style: style,
          strutStyle: StrutStyle(
            height: 1,
          ),
        ),

有关 strutStyle 的更多信息：https://api.flutter.dev/flutter/painting/StrutStyle-class.html