如何在颤动的列小部件上分层文本？答案

【问题标题】：How to layer text over column widgets in flutter?如何在颤动的列小部件上分层文本？
【发布时间】：2020-05-05 07:01:56
【问题描述】：

编辑：我制作了“I AM”明亮的霓虹绿，但它与按钮颜色混合成深绿色。

我想在覆盖整个屏幕的两个按钮上显示文本，一个上半部分和一个下半部分。我希望文本显示在屏幕中间，覆盖每个按钮的一部分。这是我的按钮代码：

Widget build(BuildContext context) {
return Scaffold(
  body: Align(
    alignment: Alignment.center,
    child: Column(
      children: <Widget>[
        Container(
          height: (MediaQuery.of(context).size.height) / 2,
          width: MediaQuery.of(context).size.width,
          child: RaisedButton(
            color: Colors.black87,
            child: poorText,
            onPressed: () {
              Navigator.push(
                context,
                MaterialPageRoute(builder: (context) => SecondRoute()),
              );
            },
          ),
        ),
        Container(
          height: (MediaQuery.of(context).size.height) / 2,
          width: MediaQuery.of(context).size.width,
          child: RaisedButton(
            color: Colors.black87,
            child: richText,
            onPressed: () {
              Navigator.push(
                context,
                MaterialPageRoute(builder: (context) => ThirdRoute()),
              );
            },
          ),
        ),
      ],
    ),
  ),
);}

我尝试使用堆栈，但它说使用了太多位置参数。如何在按钮上保留列布局和图层文本？如果还有另一种没有列的方法仍然允许使按钮工作，那也很好。谢谢！

【问题讨论】：

标签： flutter dart flutter-layout

【解决方案1】：

您可以使用Stack 小部件来实现：

注意。因为这两个按钮与中心对齐，所以您必须将文本小部件也与中心对齐，以便可以直接放置 ob=ver 两个按钮。

检查以下代码：效果很好：

Widget build(BuildContext context) {
  return Scaffold(
    // use a stack widget
    body: Stack(
      children: [
        // text to display over buttons
        Align(
          // set alignment to center to place it over the buttons
          alignment: Alignment.center,
          child: Text(
            'Text you want to display over the buttons',
            // give it your style
            style: TextStyle(

            ),
          ),
        ),
        Align(
          alignment: Alignment.center,
          child: Column(
            children: <Widget>[
              Container(
                height: (MediaQuery.of(context).size.height) / 2,
                width: MediaQuery.of(context).size.width,
                child: RaisedButton(
                  color: Colors.black87,
                  child: poorText,
                  onPressed: () {
                    Navigator.push(
                      context,
                      MaterialPageRoute(builder: (context) => SecondRoute()),
                    );
                  },
                ),
              ),
              Container(
                height: (MediaQuery.of(context).size.height) / 2,
                width: MediaQuery.of(context).size.width,
                child: RaisedButton(
                  color: Colors.black87,
                  child: richText,
                  onPressed: () {
                    Navigator.push(
                      context,
                      MaterialPageRoute(builder: (context) => ThirdRoute()),
                    );
                  },
                ),
              ),
            ],
          ),
        ),
      ],
    ),
  );}

我希望这会有所帮助。

【讨论】：

它可以工作，但由于某种原因，后面按钮的颜色与文本的颜色相混淆。有什么方法可以覆盖它吗？看起来颜色正在混合。
张贴截图，让我看看我将如何正确解决这个问题。

【解决方案2】：

在 Stack 小部件中使用 2 个 Columns 小部件。如果我理解你，下面的代码正是你想要的。

Widget build(BuildContext context) {
    return Stack(
      children: <Widget>[
        Column(
          children: <Widget>[
            Container(
              height: (MediaQuery.of(context).size.height) / 2,
              width: MediaQuery.of(context).size.width,
              child: RaisedButton(
                color: Colors.blue,
                onPressed: () {
                  Navigator.push(
                    context,
                    MaterialPageRoute(builder: (context) => SecondRoute()),
                  );
                },
              ),
            ),
            Container(
              height: (MediaQuery.of(context).size.height) / 2,
              width: MediaQuery.of(context).size.width,
              child: RaisedButton(
                color: Colors.red,
                onPressed: () {
                  Navigator.push(
                    context,
                    MaterialPageRoute(builder: (context) => ThirdRoute()),
                  );
                },
              ),
            ),
          ],
        ),
        Column(
          children: <Widget>[
            Container(
              // set alignment to center to place it over the buttons
              height: (MediaQuery.of(context).size.height) / 2,
              width: MediaQuery.of(context).size.width,

              child: Center(child: Text('Text 1')),
            ),
            Container(
              // set alignment to center to place it over the buttons
              height: (MediaQuery.of(context).size.height) / 2,
              width: MediaQuery.of(context).size.width,

              child: Center(child: Text('Text 2')),
            ),
          ],
        )
      ],
    );
  }

【讨论】：