Question

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

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

Answer 1

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

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

                        )
                    ])
                  )
            )
            ));
  }
}

希望这会有所帮助。

添加开头/结尾时如何避免ListTile标题重新对齐

1 个答案: