![](/img/trans.png)
[英]Flutter : Why Text Widget on Flutter automatically centered when placed before TextField Widget ? ( Inside Column Widget )
[英]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,
),),
)
請刪除或更改 fontFamily 它將修復它。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.