확인란과 해당 제목 사이의 공간을 줄입니다

확인란과 해당 제목 사이의 공간을 줄입니다

다음과 같은 방법으로 CheckboxListTile을 사용합니다:

ListTileTheme(
  contentPadding: EdgeInsets.only(right: 20.0),
  child: CheckboxListTile(
    controlAffinity: ListTileControlAffinity.leading,
    value: false,
    onChanged: (value) {},
    title: Text(
      "افزودن به فهرست پرکاربردها"
    ),
  ),
),

결과는 다음과 같습니다:

확인란과 제목 사이의 공백을 줄이려면 어떻게 해야 합니까?

---

목록 파일에 추가주제.

ListTileTheme(
  horizontalTitleGap: 0,
  child: CheckboxListTile(
    controlAffinity: ListTileControlAffinity.leading,
    value: false,
    onChanged: (value) {},
    title: Text(
      "افزودن به فهرست پرکاربردها"
    ),
  ),
),

이전:

이후:

---

ListTile 교체 시도주제는 다음과 같습니다:

Padding(
  padding: EdgeInsets.only(right: 20.0),
  child: Row(
    mainAxisAlignment: MainAxisAlignment.end,
    children: <Widget>[
      Text(
        "افزودن به فهرست پرکاربردها"
      ),
      SizedBox(
        width: /* The spacing in between the checkbox and text */ 20,
      ),
      Checkbox(
        value: false,
        onChanged: (value) {},
      ),
    ],
  ),
),

---

에서 원하는 것을 달성하는 것은 아마도 어려울 것이다. 그러나 항상 이에 대한 해결 방법이 있으며 이 방법은 를 사용하는 것입니다. 또한, 우리는 같은 효과를 얻기 위해 사용할 것입니다.

여기서 중요한 점은, 에서, 당신은 단지 그것과 같은 것을 하면 된다는 것이다

해결책

     bool _myBool = false;

     Container(
        child: FlatButton(
          // here toggle the bool value so that when you click 
          // on the whole item, it will reflect changes in Checkbox
          onPressed: () => setState(() => _myBool = !_myBool),
          child: Row(
            mainAxisAlignment: MainAxisAlignment.start,
            children: [
              SizedBox(
                height: 24.0,
                width: 24.0,
                child: Checkbox(
                  value: _myBool,
                  onChanged: (value){
                     setState(() => _myBool = value);
                  }
                )
              ),
              // You can play with the width to adjust your
              // desired spacing
              SizedBox(width: 10.0),
              Text("افزودن به فهرست پرکاربردها")
            ]
          )
        )
      )

결과

그리고 오른쪽에 있는 것을 원하신다면, 그리고 의 위치를 바꾸기만 하면 됩니다. 나머지는 그대로 유지됩니다.

---

Transform.translate 사용

Transform.translate(
                          offset: const Offset(-20, 0),
                         child: childWidget(),
)

전체 예제

Padding(
                      padding: const EdgeInsets.symmetric(horizontal: 8.0),
                      child: CheckboxListTile(
                        value: isChecked,
                        controlAffinity: ListTileControlAffinity.leading,
                        contentPadding: EdgeInsets.zero,
                        title: Transform.translate(
                          offset: const Offset(-20, 0),
                          child: RichText(
                            text: TextSpan(
                              text: S.of(context).iAgreeWith,
                              style: TextStyle(
                                  color: Theme.of(context).hintColor,
                                  fontWeight: FontWeight.w400),
                              children: <TextSpan>[
                                TextSpan(
                                  text: S.of(context).terms,
                                  style: TextStyle(
                                      decoration: TextDecoration.underline,
                                      color: Theme.of(context).hintColor,
                                      fontWeight: FontWeight.w400),
                                  recognizer: TapGestureRecognizer()
                                    ..onTap = () {
                                      // Single tapped.

                                      Navigator.push(
                                          context,
                                          MaterialPageRoute(
                                            builder: (context) => WebView(
                                              url:
                                                  ksportsCornerWebsitePolicyUrl,
                                              title: S.of(context).termsCap,
                                            ),
                                          ));
                                    },
                                ),
                                TextSpan(
                                    text: " " + S.of(context).and + " ",
                                    style: TextStyle(
                                        color: Theme.of(context).hintColor,
                                        fontWeight: FontWeight.w400)),
                                TextSpan(
                                  text: S.of(context).privacyPolicy,
                                  style: TextStyle(
                                      decoration: TextDecoration.underline,
                                      color: Theme.of(context).hintColor,
                                      //fontSize: 14.0.sp,
                                      fontWeight: FontWeight.w400),
                                  recognizer: TapGestureRecognizer()
                                    ..onTap = () {
                                      // Single tapped.

                                      Navigator.push(
                                          context,
                                          MaterialPageRoute(
                                            builder: (context) => WebView(
                                              url:
                                                  ksportsCornerWebsitePolicyUrl,
                                              title: S
                                                  .of(context)
                                                  .privacyPolicyCaps,
                                            ),
                                          ));
                                    },
                                ),
                              ],
                            ),
                          ),
                        ),
                        activeColor: Theme.of(context).hintColor,
                        checkColor: Theme.of(context).cursorColor,
                        onChanged: (value) {
                          isChecked = !isChecked;
                          setState(() {});
                        },
                      ),
                    ),

---

이것은 내가 ListTile 안에 이것을 추가하는 데 도움이 되었다주제 수평 제목 간격: 0,

---

아래 코드 예제와 같이 제목 텍스트 위젯을 정렬로 묶을 수 있습니다:

              ListTileTheme(
                  contentPadding: EdgeInsets.only(right: 20.0),
                  child: CheckboxListTile(
                    controlAffinity: ListTileControlAffinity.leading,
                    value: false,
                    onChanged: (value) {},
                    title: const Align(
                      alignment: Alignment(-13, 0),
                      child: Text("افزودن به فهرست پرکاربردها"),
                    ),
                  ),
                ),