当其中一些没有前导对象时对齐 ListTile 项目

Question

这是我在屏幕上看到的内容：

https://i.imgur.com/oSblgWD.png

如何对齐姓氏使其位于名字下方？我不想在姓旁边放一个图标，只在名字旁边放一个图标。

这是我的代码。谢谢

            body: Center(
            child: Form(
                key: _formKey,
                child: Column(
                    children: <Widget>[
                        ListTile(
                            leading: const Icon(Icons.person),
                            title: new TextField(
                                decoration: new InputDecoration(
                                    hintText: "First name",
                                ),
                            ),
                        ),
                        ListTile(
                            title: new TextField(
                                decoration: new InputDecoration(
                                    hintText: "Last name",
                                ),
                            ),
                        ),
                    ],
                ),
            )
        )

Answer 1

您可以在姓氏 TextField 中添加一个固定宽度为 leading 的空 Container，或者您可以将您的姓氏 TextField 包裹在 [=16] 中=] 并从左边提供一些 padding。

示例：

ListTile(
  leading: Container(
    width: 200.0, //You can adjust the width as required
  ),
  title: new TextField(
    decoration: new InputDecoration(
      hintText: "Last name",
    ),
  ),
),

或

ListTile(
  title: Padding(
    padding: padding: EdgeInsets.only(left: 200.0) //Adjust as required
    child: new TextField(
      decoration: new InputDecoration(
        hintText: "Last name",
      ),
    ),
  ),
),

Answer 2

通过将图标颜色更改为 colors.transparent 可以快速破解。不过不知道这样对不对

     body: Center(
        child: Form(
            key: _formKey,
            child: Column(
                children: <Widget>[
                    ListTile(
                        leading: const Icon(Icons.person),
                        title: new TextField(
                            decoration: new InputDecoration(
                                hintText: "First name",
                            ),
                        ),
                    ),
                    ListTile(
                        leading: const Icon(Icons.person,color: Colors.transparent),
                        title: new TextField(
                            decoration: new InputDecoration(
                                hintText: "Last name",
                            ),
                        ),
                    ),
                ],
            ),
        )
    )

Answer 3

简单而优雅的方法是使用 Padding 小部件。

@override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
          child: Form(
        //  key: _formKey,
        child: Column(
          children: <Widget>[
            ListTile(
              leading: const Icon(Icons.person),
              title: new TextField(
                decoration: new InputDecoration(
                  hintText: "First name",
                ),
              ),
            ),
            ListTile(
              leading: Padding(padding: EdgeInsets.all(16.0)),
              title: new TextField(
                decoration: new InputDecoration(
                  hintText: "Last name",
                ),
              ),
            ),
          ],
        ),
      )),
    );
  }

Answer 4

我所做的是给它一个大小为 0 的图标，ListTile 将保存 space 即使没有任何可见的东西

当其中一些没有前导对象时对齐 ListTile 项目

Aligning ListTile items when some of them don't have a leading object

dart

flutter

flutter-layout