Question

我的flutter应用程序中有一个注册屏幕，其外观如下所示：

我试图实现此设计的问题是将左下方屏幕中的条纹图像与边缘对齐。我尝试使用以下代码实现这一目标。

class Login extends Component {
  onClick=()=>{
    this.props.setCookie();
  }
  render() {
    return (
      <div>
        <h1>Login page!</h1>
        <Button onClick={this.props.setCookie}>Set Cookie to Log In</Button>
      </div>

    );
  }
}

我删除了一些小部件，但这是我尝试过的，并且得到以下结果： here

您看到的条纹图像不是从屏幕边缘开始。我也尝试使用body: ListView( children: <Widget>[ Padding( padding: const EdgeInsets.all(30.0), child: Column( children: <Widget>[ Form( child: Column( children: <Widget>[ TextFormField( controller: nameController, textInputAction: TextInputAction.next, focusNode: _nameNode, ), TextFormField( controller: phoneController, keyboardType: TextInputType.phone, textInputAction: TextInputAction.next, ), ], ), ), ], ), ), Stack( children: <Widget>[ Padding( padding: const EdgeInsets.only(left: 95), child: RaisedButton( child: Padding( padding: const EdgeInsets.all(10.0), child: Text( "Register", ), ), ), ), Padding( padding: const EdgeInsets.only(right: 0, top: 25), child: Image.asset("assets/images/stripes.png",height: 240.0,width:130.0,fit: BoxFit.cover,), ), Padding( padding: const EdgeInsets.only(left: 80, top: 100), child: Column( children: <Widget>[ Text( "Have an account already", ), FlatButton( child: Text( "Login here", ), ), ], ), ), ], ), ], ),小部件。因此，我将positioned小部件做成了positioned小部件的子元素，如下所示：

stack

这会将图像与屏幕边缘对齐。但是由于我使用的是body: Stack( children: <Widget>[ Positioned( bottom: -133, left: -205, height:300.0, width:430.0, child: Image.asset('assets/images/stripes.png') ), ListView( children: <Widget>[ Padding( padding: const EdgeInsets.all(30.0), child: Column( children: <Widget>[ Form( child: Column( children: <Widget>[ TextFormField( controller: nameController, textInputAction: TextInputAction.next, ), ], ), ), ], ), ), Stack( children: <Widget>[ Padding( padding: const EdgeInsets.only(left: 95), child: RaisedButton( child: Padding( padding: const EdgeInsets.all(10.0), child: Text( "Register", ), ), ), ), Padding( padding: const EdgeInsets.only(left: 80, top: 100), child: Column( children: <Widget>[ Text( "Have an account already", ), FlatButton( child: Text( "Login here", ), ), ], ), ), ], ), ], ), ] ),小部件，所以在滚动页面时它涵盖了其他小部件。您可以检查图像here。我删除了许多小部件以产生最少的代码，但是涉及的主要小部件仍然存在。有什么办法可以实现设计？任何帮助，将不胜感激。谢谢。

Answer 1

在填充行中，您需要删除const：padding: EdgeInsets.only (left, top, botom, right)并尝试使用列crossAxisAlignment: CrossAxisAlignment.start, 希望你能在Github上留下链接

Answer 2

在将图像放置到应用程序中之前，您需要对其进行裁剪，但是您可以通过以下方式做到这一点：

  body: Stack(children: <Widget>[
    Align(
        alignment: Alignment.bottomLeft,
        child: Image.asset('assets/images/stripes.png')),
    ListView(
      children: <Widget>[
        Padding(
          padding: const EdgeInsets.all(30.0),
          child: Column(
            children: <Widget>[
              Form(
                child: Column(
                  children: <Widget>[
                    TextFormField(
                      textInputAction: TextInputAction.next,
                    ),
                  ],
                ),
              ),
            ],
          ),
        ),
        Stack(
          children: <Widget>[
            Padding(
              padding: const EdgeInsets.only(left: 95),
              child: RaisedButton(
                onPressed: () {},
                child: Padding(
                  padding: const EdgeInsets.all(10.0),
                  child: Text(
                    "Register",
                  ),
                ),
              ),
            ),
            Padding(
              padding: const EdgeInsets.only(left: 80, top: 100),
              child: Column(
                children: <Widget>[
                  Text(
                    "Have an account already",
                  ),
                  FlatButton(
                    onPressed: () {},
                    child: Text(
                      "Login here",
                    ),
                  ),
                ],
              ),
            ),
          ],
        ),
      ],
    ),
  ]),

如何将图像放置在屏幕边缘

2 个答案: