flutter 使用material3的文本元素比material2占用更多的空间,如何全局设置文本高度以匹配material2?

5fjcxozz  于 2023-05-29  发布在  Flutter
关注(0)|答案(2)|浏览(272)

看起来material3增加了文本的高度,这意味着即使我在更新material3之前和之后使用相同的fontSize,文本也会占用更多的空间。在我的例子中,这在某些情况下会导致溢出错误。
我发现我可以在设置TextStyleheight: 1时解决这个问题,但要做到这一点,我需要将其单独设置为每个文本元素。
有没有办法让我使用“旧间距”?这意味着全局设置文本元素的高度以匹配material2中文本元素的高度?

uqzxnwby

uqzxnwby1#

随着对Material3的更新,排版和文本呈现发生了一些变化,这可能会影响文本元素的间距和高度。如果要保持与Material2中相同的间距,可以覆盖Flutter应用中的默认文本主题设置。
您可以创建自定义TextTheme,并将其全局应用于应用的主题。下面是一个示例,说明如何执行此操作:

import 'package:flutter/material.dart';

final textTheme = TextTheme(
  headline1: TextStyle(fontSize: 24, height: 1.0), // Customize the height as per your needs
  headline2: TextStyle(fontSize: 20, height: 1.0),
  headline3: TextStyle(fontSize: 18, height: 1.0),
  // Add more text styles as needed
);

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'My App',
      theme: ThemeData(
        textTheme: textTheme, // Apply the custom text theme
        // Add other theme customizations as needed
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('My App')),
      body: Center(
        child: Text(
          'Hello, World!',
          style: Theme.of(context).textTheme.headline1, // Use the custom text style
        ),
      ),
    );
  }
}

在上面的示例中,我们定义了一个自定义TextTheme,并覆盖每个文本样式的height属性,以匹配Material2的间距。然后,我们使用textTheme属性将此自定义文本主题应用于应用程序的整体主题。最后,在使用Text小部件时,您可以使用Theme.of(context). textTheme.headline1从应用程序的主题访问文本样式,从而指定所需的文本样式。
通过以这种方式自定义TextTheme,您可以在整个应用中保持文本元素的旧间距。根据您的具体要求调整字体大小和其他属性。

tvmytwxo

tvmytwxo2#

您可以在MaterialApp的构建器中使用DefaultTextStyle
示例:

MaterialApp(
                home: const HomeScreen(),
                builder: (context, child) => DefaultTextStyle(
                  style: const TextStyle(height: 1),
                  child: child!,
                ),
              ),

相关问题