飘飘：怎么。获得居中的部分标题栏，右侧有按钮答案

【问题标题】：Flutter: How. to get a centered section title bar with button on right飘飘：怎么。获得居中的部分标题栏，右侧有按钮
【发布时间】：2021-05-04 21:34:00
【问题描述】：

我发现 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 包裹在图标周围，以便它可以溢出并让文本决定大小，但我得到的只是关于没有大小的小部件的大量错误日志。

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

【问题讨论】：

标签： flutter

【解决方案1】：

我从您的问题中了解到，您想要制作类似于您展示的图像的东西。您可以这样做：

 @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: () {},
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }

输出：

【讨论】：

感谢您抽出宝贵时间调查此事。我最终得到了一些稍微不同的东西，并意识到我一直在追求一种不太合适的方法。

【解决方案2】：

感谢@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: () {}),
          ),
        ],
      ),
    );

【讨论】：