☰

Flutter テキストウィジェットから不要なパディングを削除するにはどうすればよいですか? 質問する

tag-icon • tag-icon flutter dart padding
Flutter テキストウィジェットから不要なパディングを削除するにはどうすればよいですか? 質問する

ウィジェットがあるのですTextが、コードで何も設定していないのに、上部と下部にパディングがあるように見えるのはなぜかわかりません。これはデフォルトの Flutter アプリからのもので、フォント サイズを変更しただけです。

  body: Center(
    child: Column(
      children: <Widget>[
        Text(
          '0:00.00',
          style: TextStyle(fontSize: 76),
        ),
      ],
    ),
  ),

これは Android Studio で強調表示されたウィジェットのスクリーンショットですText。他にパディングを追加するものは何もないので、なぜそこにあるのかわかりません。

ここに画像の説明を入力してください

CSS でパディングが設定されていないにもかかわらずパディングが存在する場合、これが発生padding: 0することがあります。これは、ウィジェットのパディング オプションが見つからないため、簡単に削除できますが、ここではその方法がわかりませんText。

編集: パディングの量はフォントのサイズによって変わります。HTMLH1タグのように、常に一定量のパディングが含まれているようです。

ベストアンサー1

不要なパディングを取り除く適切な方法は、heightの プロパティを設定することですTextStyle。これにより、各行の高さを設定できます。

                  Text(
                    "Let's make\nsome pancakes",
                    style: TextStyle(
                      height: 1.2, //SETTING THIS CAN SOLVE YOUR PROBLEM
                      color: Colors.white,
                      fontSize: 20,
                      fontWeight: FontWeight.w300,
                    ),
                    textAlign: TextAlign.center,
                  ),

実際、ドキュメントから次のことを確認できます。

ほとんどのフォントでは、高さを 1.0 に設定することは、高さを省略したり null に設定したりすることと同じではありません。これは、fontSize が EM 正方形の高さを設定するためであり、これはフォントが提供する行の高さのメトリックとは異なるためです。

詳細情報:https://api.flutter.dev/flutter/painting/TextStyle/height.html

ぜひ試してみてください。私の場合は効果がありました。

おすすめ記事