dart - 卡重叠凸起的按钮在 flutter

Question

friend 们，我正在考虑制作这种类型的 View ，但我无法像给定图像那样设置按钮重叠我正在使用包含文本字段和给定图像按钮的堆栈小部件请检查并帮助我出去我也尝试使用中心小部件，但 View 是按要求出现的，我也使用了定位小部件，但它的获取按钮在屏幕底部 像这样但我需要如上图

我的布局设计

 class MyApp extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    MyAppState myAppState() => new MyAppState();
    return myAppState();
  }
}

class MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(home: new Scaffold(body: new Builder(
      builder: (BuildContext context) {
        return new Stack(
          children: <Widget>[
            new Image.asset(
              'assets/images/bg.png',
              fit: BoxFit.cover,
            ),
            new Center(
              child: new Container(
                child: new Card(
                  color: Colors.white,
                  elevation: 6.0,
                  margin: EdgeInsets.only(right: 15.0, left: 15.0),
                  child: new Wrap(
                    children: <Widget>[
                      Center(
                        child: new Container(
                          margin: EdgeInsets.only(top: 20.0),
                          child: new Text(
                            'Login',
                            style: TextStyle(
                                fontSize: 25.0, color: secondarycolor),
                          ),
                        ),
                      ),
                      new ListTile(
                        leading: const Icon(Icons.person),
                        title: new TextFormField(
                          decoration: new InputDecoration(
                            hintText: 'Please enter email',
                            labelText: 'Enter Your Email address',
                          ),
                          keyboardType: TextInputType.emailAddress,
                        ),
                      ),
                      new ListTile(
                        leading: const Icon(Icons.lock),
                        title: new TextFormField(
                          decoration: new InputDecoration(
                            hintText: 'Please enter password',
                            labelText: 'Enter Your Password',
                          ),
                          keyboardType: TextInputType.emailAddress,
                          obscureText: true,
                        ),
                      ),
                      Container(
                        margin: EdgeInsets.only(top: 10.0, bottom: 15.0),
                        child: Center(
                          child: Text(
                            "FORGOT PASSWORD",
                            style: TextStyle(
                                decoration: TextDecoration.underline,
                                color: Colors.black,
                                fontSize: 16.0),
                          ),
                        ),
                      ),
                      Center(
                        child: Container(
                          margin: EdgeInsets.only(bottom: 40.0, top: 10.0),
                          child: Text.rich(
                            TextSpan(
                              children: const <TextSpan>[
                                TextSpan(
                                    text: 'NEW USER ? ',
                                    style: TextStyle(
                                        fontSize: 16.0, color: Colors.black)),
                                TextSpan(
                                    text: 'REGISTER',
                                    style: TextStyle(
                                        fontSize: 16.0,
                                        decoration: TextDecoration.underline,
                                        color: Colors.black)),
                              ],
                            ),
                          ),
                        ),
                      ),
                    ],
                  ),
                ),
              ),
            ),
            new RaisedButton(
              onPressed: () {
                print('Login Pressed');
              },
              color: primarycolor,
              shape: new RoundedRectangleBorder(
                  borderRadius: new BorderRadius.circular(30.0)),
              child: new Text('Login',
                  style: new TextStyle(
                      color: Colors.white,
                      fontSize: 16.0,
                      fontWeight: FontWeight.bold)),
            ),
          ],
        );
      },
    )));
  }
}

Answer 1

这只是实现预期结果的众多方法之一。在这种情况下，我假设您知道背景的高度。同样，有很多方法可以实现您想要的。您的代码没有任何问题，您只需要了解“事物”在 Flutter 中的工作方式

Widget demo = Stack(
  children: <Widget>[
    //First thing in the stack is the background
    //For the backgroud i create a column
    Column(
      children: <Widget>[
        //first element in the column is the white background (the Image.asset in your case)
        DecoratedBox(
          decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(20.0),
            color: Colors.white
          ),
          child: Container(
            width: 300.0,
            height: 400.0,
          )
        ),
        //second item in the column is a transparent space of 20
        Container(
          height: 20.0
        )
      ],
    ),
    //for the button i create another column
    Column(
      children:<Widget>[
        //first element in column is the transparent offset
        Container(
          height: 380.0
        ),
        Center(
          child: FlatButton(
            color: Colors.red,
            child: Text("Press Me"),
            onPressed: () {},
          ),
        )
      ]
    )
  ],
);