代码之家 › 专栏 › 技术社区 › drekka

Flutter:如何。获得一个居中的部分标题栏,右侧有按钮

flutter

drekka · 技术社区 · 5 年前

我发现Flutter有一种特定的方式来处理看起来很容易的事情,并让你疯狂地试图弄清楚。在我的例子中,我需要一个全宽的节标题 Column 。该部分需要有白色背景、居中的文本标题和右侧的按钮。大致如下:

然后我遇到了一些问题:

如何将文本居中并右对齐按钮?
如何根据文本调整容器的大小。图标,但不要缩小到按钮的大小,因为这会使区域太大?

以下是我目前所拥有的:

    return Container(
      color: theme.cardColor,
      // constraints: BoxConstraints(minWidth: double.infinity),
      padding: EdgeInsets.all(FormFieldFactory.sidePadding.left),
      child: Stack(
        children: [
          SizedBox(
            width: double.infinity,
            child: Text(
              localisations.today,
              textAlign: TextAlign.center,
              style: theme.textTheme.subtitle1,
            ),
          ),
            IconButton(icon: Icon(Icons.info_outline_rounded), onPressed: () {}),
        ],
      ),
    );

它的问题在于 IconButton 是容器太高了,它在左边。我试着包一个 OverflowBox 在图标周围,这样它就可以溢出并让文本决定大小,但我得到的只是关于没有大小的小部件的大量错误日志。

那么,我错过了什么?我觉得这应该放在“没那么难”的篮子里,但我已经摆弄了几个小时,试图弄清楚。

0 回复 | 直到 5 年前

Shubhamhackz 5 年前

我从你的问题中了解到,你想制作出与你展示的图像类似的东西。您可以这样做:

 @override
  Widget build(BuildContext context) {
    double width = MediaQuery.of(context).size.width;
    double height = MediaQuery.of(context).size.height;
    return SafeArea(
      child: Scaffold(
        backgroundColor: Colors.grey,
        body: Container(
          color: Colors.white,
          width: width,
          height: height * 0.08,
          child: Stack(
            children: [
              Container(
                alignment: Alignment.center,
                child: Text(
                  'Title',
                  textAlign: TextAlign.center,
                  style: TextStyle(
                    fontSize: 20,
                    fontWeight: FontWeight.bold,
                  ),
                ),
              ),
              Positioned(
                right: 0,
                top: 0,
                bottom: 0,
                child: IconButton(
                  icon: Icon(
                    Icons.info_outline,
                    size: 28,
                  ),
                  onPressed: () {},
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }

输出:

drekka 5 年前

感谢@Shubhamhackz,我重新评估了代码和我正在做的事情。我意识到我先从文本标签开始,然后尝试添加按钮。由于按钮的高度更大,我继续尝试将其安装并溢出,使其与文本垂直居中。

我应该做的是认识到按钮会占用更多空间,改变我的想法,用它来居中文本,同时缩小顶部和底部填充。

最终,我得到了这样的结果:

    return Container(
      color: theme.cardColor,
      padding: FormFieldFactory.sidePadding,
      child: Stack(
        alignment: Alignment.center,
        children: [
          Text(
            localisations.today,
            style: theme.textTheme.subtitle1,
          ),
          Align(
            alignment: Alignment.centerRight,
            child: IconButton(icon: Icon(Icons.info_outline_rounded), onPressed: () {}),
          ),
        ],
      ),
    );