android - Flutter dart:如何分隔Text和TextField之间的空间，以及如何将RadioListTile集合在一起？

Question

我正在学习Flutter。我有问题(请参见下图)。我想在文本“性别”和文本字段“名称”之间分隔空格。我也想将RadioListTile放在一起，它们是非常分开的。有可能这样做吗？按照我的代码

class _AlertDialogWidgetState extends State<AlertDialogWidget> {
  @override
  Widget build(BuildContext context) {
    return SingleChildScrollView(
      child: ListBody(
        children: <Widget>[
          TextField(
            autofocus: true,
            decoration: InputDecoration(
                contentPadding: new EdgeInsets.symmetric(vertical: 10.0, horizontal: 10.0),
                border: OutlineInputBorder(), hintText: "New user"),
            onChanged: (text) => widget.name = text,
          ),
          Text(
            'Sex',
            textAlign: TextAlign.left,
            overflow: TextOverflow.ellipsis,
            style: TextStyle(fontWeight: FontWeight.bold),
          ),
          RadioListTile(
            title: Text("Female"),
            value: "female",
            groupValue: widget.sex,
            onChanged: (String value) {
              setState(() {
                widget.sex = value;
              });
            },
          ),
          RadioListTile(
            title: Text("Male"),
            value: "male",
            groupValue: widget.sex,
            onChanged: (String value) {
              setState(() {
                widget.sex = value;
              });
            },
          ),
          RadioListTile(
            title: Text("Other"),
            value: "other",
            groupValue: widget.sex,
            onChanged: (String value) {
              setState(() {
                widget.sex = value;
              });
            },
          ),
        ],
      ),
    );
  }
}

Answer 1

用TextField包裹Padding，以便在TextField和Text之间放置更多空间，如下所示:

Padding(
  padding: EdgeInsets.only(top: 15),
  child: Text(
    'Sex',
    textAlign: TextAlign.left,
    overflow: TextOverflow.ellipsis,
    style: TextStyle(fontWeight: FontWeight.bold),
  ),
),

对于 RadioListTile，您不能更改radio的填充，但是可以使用 Radio包装的 ListTile并设置其对齐方式使其更接近标题:

ListTile(
  title: Align(
    child: new Text("Female"),
    alignment: Alignment(-1.2, 0),
  ),
  leading: Radio(
    value: "female",
    groupValue: 'F',
    onChanged: (String value) {
      setState(() {
        widget.sex = value;
      });
    },
  ),
)