47

ウィジェット (IconButton、CheckBox、FlatButton) のデフォルトのパディングに問題があります。私はこの懸念について多くのことを検索しましたが、成功しませんでした。

ここに画像の説明を入力

上の画像では、外側の青い長方形がこれらのウィジェットの実際のサイズであり、そのスペースを削除する必要があります。

Checkbox(
          onChanged: (value) {
            setState(() {
              _rememberMeFlag = !_rememberMeFlag;
            });
          },
          value: _rememberMeFlag,
          activeColor: const Color(0xff00bbff),
          materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
        )

以下は、ウィジェット アイコンを非表示/表示するためのウィジェット コードです。

new Container(
          child: TextFormField(
            decoration: InputDecoration(
              labelText: "Password",
              suffixIcon: Padding(
                padding: EdgeInsetsDirectional.zero,
                child: GestureDetector(
                  child: Icon(
                    hidePassword ? Icons.visibility : Icons.visibility_off,
                    size: 20.0,
                    color: Colors.black,
                  ),
                ),
              ),
              contentPadding: const EdgeInsets.only(
                  left: 0.0, top: 6.0, bottom: 6.0, right: 0.0),
            ),
            obscureText: !hidePassword,
            maxLength: 20,
          ),
        )

コンテナのサイズも設定しようとしましたが、運がありません。ウィジェットのパディング プロパティも試しましたが、成功しませんでした。

これらのウィジェットからこの余分なスペースを削除する方法はありますか?

4

11 に答える 11

2

ウィジェットのデフォルトのサイズCheckboxは 48x48 です。したがって、上記の回答のように、Checkbox内側に折り返すSizedBoxと、白い間隔が狭くなります。24x24 で試してみましたが、すべての間隔がなくなりました。

SizedBox(
  width: 24.0,
  height: 24.0,
  child: Checkbox(),

この後、ウィジェットSizedBox内でラップして、必要なスペースを任意の側に配置します。Padding

Padding(
  padding: const EdgeInsets.only(right: 8.0),
  child: SizedBox(
    width: 24.0,
    height: 24.0,
    child: Checkbox(),
  ),
)
于 2021-06-04T06:06:37.047 に答える