Question

我尝试使用flutter创建一个登录屏幕，在那里我添加了记住我的复选框，但我无法正确对齐，

Flutter复选框会在自身周围占用不必要的空间，以提供良好的触摸式用户体验。

这就是我的布局显示方式，

检查以下代码，

        new Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: <Widget>[
                  new Row(
                    children: <Widget>[
                      new Checkbox(
                        activeColor: Colors.grey,
                        value: _isChecked,
                        onChanged: (bool value) {
                          _onChecked(value);
                        },
                      ),
                      new GestureDetector(
                        onTap: () => print("Remember me"),
                        child: new Text(
                          "Remember me",
                          style: new TextStyle(color: Colors.white70),
                        ),
                      )
                    ],
                  ),
                  new Text(
                    "Forgot password ?",
                    style: new TextStyle(color: Colors.white70),
                  )
                ],
              ),

Answer 1

使用SizedBox
该小部件基本上是为调整其子级大小而制作的。

SizedBox(
    width: 15,
    height: 15,
    child: Checkbox(value: false, onChanged: null)
)

Answer 2

然后试试这个，

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'NonStopIO',
      theme: new ThemeData(
        primarySwatch: Colors.red,
      ),
      home: new MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => new _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  bool _rememberMeFlag = false;

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text('NonStopIO'),
      ),
      body: new Container(
        color: Colors.black38,
        child: new Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            new Container(
              margin: new EdgeInsets.symmetric(vertical: 5.0, horizontal: 35.0),
              color: Colors.white70,
              height: 50.0,
            ),
            new Container(
              margin: new EdgeInsets.symmetric(vertical: 5.0, horizontal: 35.0),
              color: Colors.white70,
              height: 50.0,
            ),
            new Container(
                margin: new EdgeInsets.symmetric(vertical: 5.0, horizontal: 20.0),
                child: new Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: <Widget>[
                    new Row(
                      children: <Widget>[
                        new GestureDetector(
                          child: new Row(
                            children: <Widget>[
                              new Checkbox(
                                value: _rememberMeFlag,
                                onChanged: (value) => setState(() {
                                      _rememberMeFlag = !_rememberMeFlag;
                                    }),
                              ),
                              new Text(
                                "Remember me",
                                style: new TextStyle(color: Colors.white70),
                              )
                            ],
                          ),
                          onTap: () => setState(() {
                                _rememberMeFlag = !_rememberMeFlag;
                              }),
                        ),
                      ],
                    ),
                    new Container(
                      margin: new EdgeInsets.only(right: 15.0),
                      child: new Text(
                        "Forgot password ?",
                        style: new TextStyle(color: Colors.white70),
                      ),
                    )
                  ],
                )),
            new Container(
              margin: new EdgeInsets.symmetric(vertical: 5.0, horizontal: 35.0),
              color: Colors.orange,
              height: 50.0,
            ),
          ],
        ),
      ), // This trailing comma makes auto-formatting nicer for build methods.
    );
  }
}

在这里，我调整了边距以对齐复选框和忘记密码文本。

Answer 3

您可以通过自定义Checkbox小部件来实现。

使用中的确切代码创建CustomCheckbox flutter / packages / flutter / lib / src / material / checkbox.dart 。
向您的CustomCheckbox小部件添加新字段
```
     final bool useTapTarget;
```
确保使用默认值将新字段添加到构造函数中值设置为true。
```
     this.useTapTarget = true
```

在 _CheckboxState 方法中修改构建方法。加上这个返回调用上方的代码块。

     Size noTapTargetSize = Size(CustomCheckbox.width, 
     CustomCheckbox.width);
     final BoxConstraints additionalConstraints = 
     BoxConstraints.tight(widget
        .useTapTarget? size : noTapTargetSize);

最后，在代码中使用CustomCheckbox小部件，然后设置自定义字段设置为false可删除材质填充。例子

Container(
        margin: EdgeInsets.only(right: 15),
        child:CustomCheckbox(
            value: _checked,
            materialTapTargetSize: null,
            onChanged: _onCheckBoxChange,
            useTapTarget: false,
            activeColor: Colors.teal),
      )

颤动复选框不需要的触摸空间

3 个答案: