Question

我的容器中的Row左边有填充（我认为）。我要与Column中的其他子项对齐。在过去的两个小时里，我一直在研究填充问题，并了解如何消除填充问题。

登录应该从左侧垂直对齐，并在其上方的按钮上

@override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Container(
        height: MediaQuery.of(context).size.height,
        child: Stack(
          alignment: Alignment.topCenter,
          children: <Widget>[
            Container(
              decoration: BoxDecoration(
                image: DecorationImage(
                  image: AssetImage('assets/img/signin.png'),
                  fit: BoxFit.cover,
                ),
              ),
            ),
            Container(
              padding: EdgeInsets.only(top: 100),
              child: Opacity(
                opacity: _showProgressIndicator ? 1 : 0,
                child: CircularProgressIndicator(),
              ),
            ),
            Container(
//                height: MediaQuery.of(context).size.height - 180,
                padding:
                EdgeInsets.only(top: 20, left: 10, right: 10, bottom: 60),
                child: Form(
                  key: formKey,
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.stretch,
                    verticalDirection: VerticalDirection.up,
                    children: [
                      Row(
                          mainAxisAlignment: MainAxisAlignment.spaceBetween,
                          children: [
                            new FlatButton(
                              padding: EdgeInsets.zero,

                              child: new Text('SIGN IN',
                                  style: Theme.of(context).textTheme.body1),
                              onPressed: () {
                                Navigator.push(
                                    context, SignInPage(widget.onSignedIn));
                              },

                            ),
                            Opacity(
                                opacity: _showMessage ? 1 : 0,
                                child: Text('CONSIDER GOOGLE', style:Theme.of(context).textTheme.body1)),
                            new FlatButton(
                              padding: new EdgeInsets.all(0.0),
                              child: new Text(
                                'SIGN UP WITH EMAIL',
                                style: Theme.of(context).textTheme.body1,
                              ),
                              onPressed: () {
                                Navigator.push(
                                    context, SignUpPage(widget.onSignedIn));
                              },
                            ),
                          ]),
                      new Container(
                        // padding: EdgeInsets.all(10),
                        child: new Column(
                          crossAxisAlignment: CrossAxisAlignment.stretch,
                          children: <Widget>[
                            new RaisedButton(
                              color: Colors.blue[800],
                             padding: EdgeInsets.all(20),
                              shape: RoundedRectangleBorder(
                                  borderRadius:
                                  BorderRadius.all(Radius.circular(4))),
                              child: new Text('CONNECT WITH FACEBOOK',
                                  style: new TextStyle(
                                      fontSize: 16,
                                      letterSpacing: 0.5,
                                      color: Colors.white)),
                              onPressed: loginWithFb,
                            ),
                            new SizedBox(height: 20),
                            new RaisedButton(
                              color: Colors.red,
                              padding: EdgeInsets.all(20),
                              shape: RoundedRectangleBorder(
                                  borderRadius:
                                  BorderRadius.all(Radius.circular(4))),
                              child: new Text('CONNECT WITH GOOGLE',
                                  style: new TextStyle(
                                      fontSize: 16,
                                      letterSpacing: 0.5,
                                      color: Colors.white)),
                              onPressed: loginWithGoogle,
                            ),
                          ],
                        ),
                      ),
                    ],
                  ),
                ))
          ],
        ),
      ),
    );
  }

Answer 1

如果我正确理解您的意思，我可以通过更改默认的ButtonTheme来解决此问题，因为您说过：

登录应该从左侧垂直对齐，并在其上方的按钮上

如果不是这种情况，请不要从左侧水平开始：

用Flatbutton和新的ThemeData将主题中的ButtonTheme包裹起来，然后用您自己的来更改padding和minWidth（当我只更改了padding或width时，并没有工作）。这将从ButtonTheme中删除默认值 示例：

Row(
    mainAxisAlignment: MainAxisAlignment.spaceBetween,
    children: [
      Theme(
        data: ThemeData(buttonTheme: ButtonThemeData(minWidth: 20.0,padding: EdgeInsets.all(0.0))),
        child: new FlatButton(
          child: new Text('SIGN IN',
              style: Theme.of(context).textTheme.body1),
          onPressed: () {
          },

        ),
      ),
      Opacity(
          opacity: true ? 1 : 0,
          child: Text('CONSIDER GOOGLE', style:Theme.of(context).textTheme.body1)),
      new FlatButton(
        padding: new EdgeInsets.all(0.0),
        child: new Text(
          "SIGN UP WITH EMAIL ",
          style: Theme.of(context).textTheme.body1,
        ),
        onPressed: () {

        },
      ),
    ]),

结果：

在行的开头删除不必要的填充

1 个答案: