Flutter Checkbox/CheckBoxListTile 垂直对齐选项

Question

这是我正在做的事情的简化示例

return SizedBox(
  width: 300,
  height: 200,
  child: Padding(
    padding: const EdgeInsets.all(12.0),
    child: Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        const Text('text line'),
        Row(
          children: [
            Checkbox(
                value: false,
                onChanged: (bool? value) {}),
            const Expanded(
                child: Text(
                    'Lorem ipsum dolor sit amet, consectetur adipiscing elit,'
                    'sed do eiusmod tempor incididunt ut labore et dolore magna'
                    'aliqua. Ut enim ad minim veniam, quis nostrud exercitation'
                    'ullamco laboris nisi ut aliquip ex ea commodo consequat.'),
            ),
          ],
        ),
      ],
    ),
  ),
);

因为我尝试将行中的复选框（前导）与 3 行文本（尾随）垂直对齐。

是否可以修改复选框的垂直对齐方式，而无需使用完全自定义的小部件（例如使用堆栈/定位）？

我尝试过使用视觉密度进行修改，transform.translate 几乎没有垂直控制。 我尝试使用 controlAffinity.leading、contentpadding.zero 同时使用 CheckBox 和 CheckBoxListTile。

Answer 1

在行上使用

crossAxisAlignment: CrossAxisAlignment.start,

。

SizedBox(
    width: 300,
    height: 200,
    child: Padding(
      padding: const EdgeInsets.all(12.0),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          const Text('text line'),
          Row(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Checkbox(value: false, onChanged: (bool? value) {}),
              const Expanded(
                child: Text(
                    'Lorem ipsum dolor sit amet, consectetur adipiscing elit,'
                    'sed do eiusmod tempor incididunt ut labore et dolore magna'
                    'aliqua. Ut enim ad minim veniam, quis nostrud exercitation'
                    'ullamco laboris nisi ut aliquip ex ea commodo consequat.'),
              ),
            ],
          ),
        ],
      ),
    ),
  ),

Answer 2

我认为你可以使用 CheckboxListTile

 CheckboxListTile(
                    controlAffinity: ListTileControlAffinity.leading,
                    title: Text('In publishing and graphic design, Lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document or a typeface without relying on meaningful content. Lorem ipsum may be used as a placeholder before final copy is available.'),
                    value: true, onChanged: (value) {}),

Answer 3

这是一个可行的解决方案，它的水平最小值是-4视觉密度用于紧凑性。 视觉密度：视觉密度（水平：-4.0，垂直：-4.0），

将攻丝目标尺寸缩小到材料规范提供的最小值。 材料TapTargetSize：MaterialTapTargetSize.shrinkWrap，

Row(
  crossAxisAlignment: CrossAxisAlignment.start,
  children: [
    Container(
      padding: EdgeInsets.only(right: 10),
      child: Theme(
        data: ThemeData(
          materialTapTargetSize:
              MaterialTapTargetSize.shrinkWrap,
          visualDensity:
              VisualDensity(horizontal: -4.0, vertical: -4.0),
        ),
        child: Checkbox(
          value: _isChecked,
          onChanged: (newValue) {
            FocusManager.instance.primaryFocus?.unfocus();
            setState(() {
              _isChecked = newValue!;
              print(newValue);
            });
          },
          side: BorderSide(
              color: Colors.grey.shade400,
              style: BorderStyle.solid,
              width: 2),
        ),
      ),
    ),
    Expanded(
      child: RichText(
        text: TextSpan(
          text: 'I agree to the ',
          style: TextStyle(fontSize: 16, color: Colors.black),
          children: <TextSpan>[
            TextSpan(
              text: 'Terms of Service',
              style: TextStyle(
                color: Colors
                    .blue, // Set your desired color for the Terms o
                fontWeight: FontWeight.bold,
              ),
            ),
            TextSpan(
              text: ' and ',
            ),
            TextSpan(
              text: 'Privacy Policy',
              style: TextStyle(
                color: Colors
                    .blue, // Set your desired color for the Privacy
                fontWeight: FontWeight.bold,
              ),
            ),
          ],
        ),
      ),
    ),
  ],
),