Question

我是新手。我创建了两个凸起的按钮。两者都创建为小部件，然后在主Scaffold小部件中调用。我希望它们彼此重叠。我正在尝试堆栈小部件，但是一个按钮丢失了。我也尝试过填充和定位，但是没有任何效果。我不想使用切换按钮，因为它们只是彼此相邻放置且没有重叠。

代码


Widget business(context, setState) {


 
      return
          Padding(
            padding: const EdgeInsets.only(left: 12.0),
            child: ClipRRect(
              borderRadius: BorderRadius.circular(25.0),
              child: SizedBox(
                height: 60,
                width: 60,
                child: RaisedButton(
                  shape: RoundedRectangleBorder(
                      borderRadius: BorderRadius.circular(25.0),
                      side: BorderSide(color: button2 ? primaryColor : Colors.white)
                  ),

                  color: button1 ? primaryColor : Colors.white,
                  onPressed: () {
                    setState(() {
                      button1 = true;
                      button2 = false;
                    });

                    Fluttertoast.showToast(
                      msg:
                      "Business",
                      toastLength: Toast.LENGTH_SHORT,
                      gravity: ToastGravity.BOTTOM,
                      timeInSecForIosWeb: 4,
                      backgroundColor: primaryColor,
                      textColor: Colors.white,
                      fontSize: 16.0,
                    );
                  },
                  child: Icon(
                    MyFlutterApp.office,
                    color: button1 ? Colors.white : Colors.black,
                  ),
                ),
              ),
            ),
          );

    }

    else {
      return Container();
    }
  

  Widget personal(context, setState) {


    
      return
        Padding(
          padding: const EdgeInsets.only(left: 12.0),
          child: ClipRRect(
            borderRadius: BorderRadius.circular(25.0),
            child: SizedBox(
              height: 60,
              width: 60,
              child: RaisedButton(
                shape: RoundedRectangleBorder(
                    borderRadius: BorderRadius.circular(25.0),
                    side: BorderSide(color: button1 ? primaryColor : Colors.white)
                ),

                color: button2 ? primaryColor : Colors.white,
                onPressed: () {
                  setState(() {
                    button1 = false;
                    button2 = true;
                  });

                  Fluttertoast.showToast(
                    msg:
                    "Personal",
                    toastLength: Toast.LENGTH_SHORT,
                    gravity: ToastGravity.BOTTOM,
                    timeInSecForIosWeb: 4,
                    backgroundColor: primaryColor,
                    textColor: Colors.white,
                    fontSize: 16.0,
                  );
                },
                child: Icon(
                  MyFlutterApp.personal,
                  color: button2 ? Colors.white : Colors.black,
                ),
              ),
            ),
          ),
        );

    }

    else {
      return Container();
    
  }

Answer 1

我在颤振中具有最小的堆栈重现代码，我可以给你

c_output.readAll()

Answer 2

基于Flutter Oficial Documentation，您可以使用Stack小部件来实现此效果。 Here是有关此小部件的快速教程。

请始终记得使用RaisedButton从上方的按钮中移除高程，以免造成黑色的叠加效果。

这里是一个例子：

Stack(
  children: <Widget>[
    RaisedButton(
      onPressed: () => {},
      color: Colors.red,
      child: Text('First'),
    ),
    RaisedButton(
      onPressed: () => {},
      color: Colors.transparent,
      elevation: 0,
      child: Text('Second'),
    ),
  ],
)

这里是result。

重叠两个按钮颤振

2 个答案: