flutter - 重叠两个按钮 Flutter

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

标签： flutterdart

Answer 1

Based on Flutter Oficial Documentation, you can use the Stack widget to achieve this effect. Here is a quick tutorial about this widget.

Using RaisedButton, always remember to remove the elevation from the upper buttons, to not cause a black overlay impression.

Here is a example:

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

Here is the result.