簡體   English   中英

Flutter 文本小部件未居中

[英]Flutter text widget not centered

我試圖讓文本在容器內居中。 無論我做什么,文本都不會居中。 這是我的代碼:

Container(
  alignment: Alignment.center,
  width: 47,
  height: 47,
  decoration: BoxDecoration(color: Colors.grey, shape: BoxShape.circle),
  child: Text(
    firstName == null && lastName == null
        ? 'UU'
        : '${firstName[0]}${lastName[0]}'.toUpperCase(),
    style: TextStyle(
      fontFamily: 'AvenirLTStd-Roman',
      fontSize: 18,
      color: Colors.white,
      fontWeight: FontWeight.w300,
    ),
    textAlign: TextAlign.center,
  ),
)

這就是屏幕的生成方式:

在此處輸入圖像描述

如果您注意到文本未居中,則與頂部相比,容器的底部似乎有更多的“可用空間”。 當我在小部件檢查器中打開它並突出顯示文本小部件時,我看到了:

在此處輸入圖像描述

有誰知道我在這里缺少什么以及為什么文本不居中? 我希望文本位於容器的中間,並且頂部和底部之間的間距相等。

更新:

使用中心小部件沒有幫助:

在此處輸入圖像描述

嘗試用 Center 包裹你的容器。 中心 -> 容器

用 Center() 包裹文本。 這可能是有效的。

只需這樣做

Container(
  alignment: Alignment.center,
  width: 47,
  height: 47,
  decoration: BoxDecoration(color: Colors.grey, shape: BoxShape.circle),
  child: Center(child: Text(
    firstName == null && lastName == null
        ? 'UU'
        : '${firstName[0]}${lastName[0]}'.toUpperCase(),
    style: TextStyle(
      fontFamily: 'AvenirLTStd-Roman',
      fontSize: 18,
      color: Colors.white,
      fontWeight: FontWeight.w300,
    ),
    textAlign: TextAlign.center,
  ),),
)

嘗試

Container(
      alignment: Alignment.center,
      width: 47,
      height: 47,
      decoration: BoxDecoration(color: Colors.grey, shape: BoxShape.circle),
      child: Center(child: Text(
        firstName == null && lastName == null
            ? 'UU'
            : '${firstName[0]}${lastName[0]}'.toUpperCase(),
          style: TextStyle(
          fontFamily: 'AvenirLTStd-Roman',
          fontSize: 18,
          color: Colors.white,
          fontWeight: FontWeight.w300,
        ),
        textAlign: TextAlign.center,
      ),),
    )

在此處輸入圖像描述

像這樣試試

Container(
  alignment: Alignment.center,
  height: 47,
  width: 47,
  decoration: BoxDecoration(color: Colors.grey, shape: BoxShape.circle),
  child: Text(
  'UU',
  style: Theme.of(context).textTheme.headline6,
),)

圖片

請刪除或更改 fontFamily 它將修復它。

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM