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

Question

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

我需要以“Inglese”为中心的“Italiano”文本

标签： flutterdartflutter-layout

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(() {});
                          },

                        )
                    ])
                  )
            )
            ));
  }
}

希望这可以帮助。