Flutter 文本小部件未居中

u91tlkcl 于 2022-11-30 发布在 Flutter

关注(0)|答案(5)|浏览(259)

我正在尝试让文本在容器中居中。无论我做什么，文本都不会居中。下面是我的代码：

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,
  ),
)

屏幕是这样生成的：

如果您注意到文本没有居中，容器的底部似乎比顶部有更多的“自由空间”。当我在部件检查器中打开它并突出显示文本部件时，我看到了这样的内容：

有人知道我在这里遗漏了什么吗？为什么文本没有居中？我希望文本在容器的中间，顶部和底部之间有相等的空间。
最新消息：
使用“居中”Widget没有帮助：

flutter

来源：https://stackoverflow.com/questions/70935623/flutter-text-widget-not-centered

5条答案

按热度按时间

9vw9lbht1#

试着用中心包裹你的容器。中心-〉容器

赞(0）回复(0）举报 2022-11-30

polhcujo2#

尝试

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,
      ),),
    )

赞(0）回复(0）举报 2022-11-30

kognpnkq3#

试试这样

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,
),)

赞(0）回复(0）举报 2022-11-30

ymzxtsji4#

使用Center()自动换行。或者使用如下mediaquery：

height: MediaQuery.of(context).size.height / 0.5 inside SizedBox()

赞(0）回复(0）举报 2022-11-30

oknwwptz5#

请删除或更改fontFamily，它将修复此问题。

赞(0）回复(0）举报 2022-11-30

我来回答

Flutter 文本小部件未居中

5条答案

相关问题

热门标签

最新问答