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

【问题标题】：Flutter checkbox unwanted touch space颤动复选框不需要的触摸空间
【发布时间】：2018-11-02 08:14:10
【问题描述】：

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

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),
                  )
                ],
              ),

【问题讨论】：

标签： checkbox dart flutter

【解决方案1】：

那就试试吧，

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.
    );
  }
}

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

【讨论】：

答案的基本部分是什么？除了颜色之外，在结果中找不到差异。
@GünterZöchbauer 是否要将复选框与 TextField 垂直对齐？
这不是我的问题，但是是的，我认为这就是问题所在。
@GünterZöchbauer 更新了答案
@SachinthaUdara，在这种情况下，您可以使用此文件 flutter/packages/flutter/lib/src/material/checkbox.dart 制作自定义复选框。

【解决方案2】：

编辑

简答

Checkbox(
   materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
    ...
 )

........

长答案

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

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

修改_CheckboxState方法中的build方法。添加这个返回调用上方的代码块。

     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),
      )

【讨论】：

你会如何使用最新的颤振复选框来做到这一点？
试试这个@blah Checkbox(materialTapTargetSize: MaterialTapTargetSize.shrinkWrap, ...)

【解决方案3】：

使用 SizedBox
该小部件基本上是为调整其子项的大小而设计的。

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

【讨论】：