如何在flutter中的列小部件上叠加文字？

Question

编辑：我做了 "我是 "明亮的霓虹灯绿色，但其与按钮的颜色混合为深绿色。我做了 "我是 "明亮的霓虹灯绿色，但它与按钮的颜色混合为深绿色。

我想在两个按钮上显示文字，覆盖整个屏幕，1 上半部分和 1 下半部分。我想让文字显示在屏幕中间，有点像覆盖每个按钮的一部分。这是我的按钮代码。

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

我试着用堆栈，但它说使用了太多位置参数。我如何保持我的列式布局，并将文字层覆盖在按钮上？如果有其他的方法，没有列，仍然允许使按钮工作，这也很好。谢谢！我想在两个按钮上显示文字。

Answer 1

你可以使用 Stack 小组件来实现。

注意： 因为两个按钮是对准中心的，所以你必须把文字部件也对准中心，这样它就可以直接放在两个按钮的上方。

检查下面的代码：它完美地工作。

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

我希望这能帮助你

Answer 2

使用2 Columns 小部件 Stack 小部件。如果我理解的不错的话，下面的代码完全可以达到你想要的效果。

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')),
            ),
          ],
        )
      ],
    );
  }