添加前导/尾随时如何避免 ListTile 标题重新对齐

Question

即使我使用的是尾随图标，我也想在ListTile上保持居中的标题（文本）。 我尝试使用扩展但它不起作用。

我需要像“Inglese”一样居中的“Italiano”文本

Answer 1

@E.Benedos，无论您如何将文本居中，它都会尝试将其居中放置在可用空间中。 当您从 ListTiles 之一中删除尾随图标时，它将尝试使用该空白空间。 我能想到的一种方法是用与图标宽度相同的空容器填充空间。 如果您使用内置Icons.check和默认大小，则默认大小为 24.0，因此您可以使用宽度为 24.0 的容器，如下所示（不确定您如何处理选择，下面的代码只是一个示例） ,

class MyAppState extends State<MyApp> {
  bool itSelected = false;
  bool engSelected = false;
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
            appBar: AppBar(
              title: Text('Test'),
            ),
            body: Padding(
                  padding: EdgeInsets.all(20.0),
                  child: Center(
                    child: Column(children: <Widget>[
                      ListTile(
                        title: Center(child: Text('Italiano')),
                        trailing: itSelected ? Icon(Icons.check) : Container(width: 24.0),
                        onTap: () {
                          itSelected = true;
                          engSelected = false;
                          setState(() {});
                        },

                      ),
                      ListTile(
                        title: Center(child: Text('Inglese')),
                        trailing: engSelected ? Icon(Icons.check) : Container(width: 24.0),
                        onTap: () {
                          engSelected = true;
                          itSelected = false;
                          setState(() {});
                        }
                      )
                    ])
                  )
            )
            ));
  }
}

编辑：要将标题和图标水平居中（屏幕中心），您可以结合使用 Stack、Positioned 和 Inkwell 并尝试这样的操作（我认为使用 ListTile 没有更好的方法来实现这一点），

class MyAppState extends State<MyApp> {
  bool itSelected = false;
  bool engSelected = false;
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
            appBar: AppBar(
              title: Text('Test'),
            ),
            body: Padding(
                  padding: EdgeInsets.all(20.0),
                  child: Center(
                    child: Column(children: <Widget>[
                        InkWell(
                          child: Container(
                              height: 50.0,
                              alignment: Alignment.center,
                              child: Stack(
                                  children:<Widget>[
                                    Align(alignment: Alignment.center, child: Text('Italiano', style: TextStyle(fontSize: 18.0),)),
                                    itSelected ? Positioned(top: 12.0, right: 10.0, child: Icon(Icons.check)) : Container(),
                                  ])
                          ),
                          onTap: () {
                            itSelected = true;
                            engSelected = false;
                            setState(() {});
                          },

                        ),
                        InkWell(
                          child: Container(
                              height: 50.0,
                              alignment: Alignment.center,
                              child: Stack(
                                  children:<Widget>[
                                    Align(alignment: Alignment.center, child: Text('Inglese', style: TextStyle(fontSize: 18.0),)),
                                    engSelected ? Positioned(top: 12.0, right: 10.0, child: Icon(Icons.check)) : Container(),
                                  ])
                          ),
                          onTap: () {
                            itSelected = false;
                            engSelected = true;
                            setState(() {});
                          },

                        )
                    ])
                  )
            )
            ));
  }
}

希望这可以帮助。