Question

朋友，我正在考虑进行这种类型的查看，但是我无法像给定图像那样设置按钮重叠。我正在使用包含窗口小部件的堆栈小部件，其中包含文本字段和给定图像的按钮，请检查并帮助我自己也尝试过使用中心小部件，但是视图也按要求来了，我也使用了定位小部件，但是它在屏幕的底部像这样，但是我需要如上图

MyLayoutDesign

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

Answer 2

在这里您可以在下面找到您的解决方案代码。

    import 'package:flutter/material.dart';

    void main() => runApp(MyApp());

    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.jpeg',
             fit: BoxFit.fitWidth,
           ),
           new Center(

          child: new Container(
            height: 370.0,

            child: Container(

              height:250.0,
              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: Colors.red),
                      ),
                    ),
                  ),
                  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)),
                          ],
                        ),
                      ),
                    ),
                  ),
                  Padding(padding: EdgeInsets.only(left: 120.0)),

                ],

              ),

              ),


            ),
            padding: EdgeInsets.only(bottom: 30),

          ),

        ),
        new Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Padding(padding: EdgeInsets.only(top: 310.0)),
            RaisedButton(
              onPressed: () {
                print('Login Pressed');
              },
              color: Colors.green,
              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 3

@ibhavikmakwana为您的问题提供了更好的解决方案。其他答案均取决于背景大小，并且与屏幕无关。它们都在按钮上方创建了一个不可见的对象（通过添加容器或填充）。

我当时有that question too，但没有首先找到您的问题。

他的简单解决方案是将按钮包装在Positioned小部件中，并使其底部为0或<0。

Positioned(
  child: FlatButton(
        color: Colors.red,
        child: Text("Press Me"),
        onPressed: () {},
      ),
  right: 0,
  left: 0,
  bottom: 0,
)

我发现将“底部”属性设置为0将使窗口小部件偏移正好窗口小部件高度的0.5 *。

卡片重叠颤动的凸起按钮

3 个答案: