如何在 Flutter 中将 ListTile 的标题居中

Question

我今天再次尝试将 Flutter ListTile 的标题居中。在过去的几天里，我花了一两个小时在谷歌上搜索并尝试一些事情，然后失去了冷静并放弃了。

我刚刚学习 Flutter 并且喜欢这个概念，但找不到视频培训课程（Lynda.com、uDemy.com 等）。我已经阅读了相关文档，但无法摆脱当我尝试将它们应用于我的代码时出现的所有红线。

语法中一定有逻辑，但两周后我还没有弄清楚。

回到问题，我试过了

List<Widget> list = <Widget>[
  new ListTile(
    new child: Center (
      title:
          new Text('Title 1',
            style: new TextStyle(
                fontWeight: FontWeight.w500,
                color: Colors.deepOrangeAccent,
                fontSize: 25.0)),
    )
  ),
];


List<Widget> list = <Widget>[
  new ListTile(
    title:
            new child: Center (
          new Text('Title 2',
            style: new TextStyle(
                fontWeight: FontWeight.w500,
                color: Colors.deepOrangeAccent,
                fontSize: 25.0)),
    )
  ),
];


List<Widget> list = <Widget>[
  new ListTile(
    child: Center 
            title: (
                new Text('Title 3',
                    style: new TextStyle(
                            fontWeight: FontWeight.w500,
                            color: Colors.deepOrangeAccent,
                fontSize: 25.0)),
    )
  ),
];


List<Widget> list = <Widget>[
  new ListTile(
        title: Center
                new Text('Title 4',
                    style: new TextStyle(
                            fontWeight: FontWeight.w500,
                            color: Colors.deepOrangeAccent,
                            fontSize: 25.0)),
    )
  ),
];

请帮我解决这个问题，以及在哪里可以找到有关 Flutter 的视频课程？

从好的方面来说，如果这种情况继续下去，我将不再是灰色的，而是会秃顶。

当我将“textAlign: TextAlign.center”添加到文本对象时，我想我已经解决了。没有红线，但文字仍然左对齐。

Answer 1

我不确定您尝试了什么，但是您为了使ListTile 的title 居中，您可以像在代码中那样使用center 小部件，或者将您的文本包装在@987654327 中@小部件并设置mainAxisAlignment: MainAxisAlignment.center。

使用Center 小部件：

@override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(title: new Text("ListTile Example"),),
      body: new ListView(
        children: new List.generate(7, (int index) {
          return new ListTile(
            title: new Center(child: new Text("Centered Title#$index",
              style: new TextStyle(
                  fontWeight: FontWeight.w500, fontSize: 25.0),)),
            subtitle: new Text("My title is centered"),
          );
        }),
      ),
    );
  }

使用Row 小部件：

 @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(title: new Text("ListTile Example"),),
      body: new ListView(
        children: new List.generate(7, (int index) {
          return new ListTile(
            title: new Row(children: <Widget>[new Text("Centered Title#$index",
              style: new TextStyle(
                  fontWeight: FontWeight.w500, fontSize: 25.0),)
            ], mainAxisAlignment: MainAxisAlignment.center,),
            subtitle: new Text("My title is centered"),
          );
        }),
      ),
    );
  }

但是，您的问题不在于将标题居中，而在于您试图在一个小区域内插入太大的 Text，这就是您得到红线的原因，因此一种解决方案是选择更小的fontSize，更好的解决方案是摆脱ListTile并构建自己的自定义小部件，因为ListTile是

一个固定高度的行，通常包含一些文本以及 前导或尾随图标。

因此，如果您使用较大的小部件，则不应使用它。

这是一个简单示例，说明如何创建类似于 ListTile 的自定义小部件，但在处理较大的项目时更加灵活和可自定义：

@override
  Widget build(BuildContext context) {
    return new Scaffold(
        appBar: new AppBar(title: new Text("ListTile Example"),),
        body: new ListView(
          children: new List.generate(7, (int index) {
            return new Container(
              padding: const EdgeInsets.symmetric(
                  vertical: 10.0, horizontal: 20.0),
              child: new Column(
                children: <Widget>[
                  new Align (child: new Text("Centered Title $index",
                    style: new TextStyle(fontSize: 40.0),), //so big text
                    alignment: FractionalOffset.topLeft,),
                  new Divider(color: Colors.blue,),
                  new Align (child: new Text("Subtitle $index"),
                    alignment: FractionalOffset.topLeft,),
                  new Divider(color: Colors.blue,),
                  new Align (child: new Text("More stuff $index"),
                    alignment: FractionalOffset.topLeft,),
                  new Row(mainAxisAlignment: MainAxisAlignment.end,
                    children: <Widget>[ //add some actions, icons...etc
                      new FlatButton(onPressed: () {}, child: new Text("EDIT")), 
                      new FlatButton(onPressed: () {},
                          child: new Text("DELETE",
                            style: new TextStyle(color: Colors.redAccent),))
                    ],),
                ],
              ),
            );
          }),
        )
    );
  }

Answer 2

这是我的三行瓷砖示例：

   class ThreeRowTile extends StatelessWidget {
      final Widget title;
      final Widget detail;
      final String utility1;
      final String utility1Help;
      final String utility2Help;
      final String utility2;
      final Icon icon;
      final String cell;
      final String home;
      final String office;
      final String email;
      final VoidCallback cellTapped;
      final VoidCallback cellLongPressed;
      final VoidCallback iconTapped;

      ThreeRowTile({
        this.title,
        this.icon,
        this.detail,
        this.utility1,
        this.utility1Help,
        this.utility2,
        this.utility2Help,
        this.cellTapped,
        this.home,
        this.email,
        this.cell,
        this.office,
        this.cellLongPressed,
        this.iconTapped,
      });

      @override
      Widget build(BuildContext context) {
        List<Widget> buildChildren() {
          List<Widget> builder = [];
          if (cell.isNotEmpty && !cell.toString().contains("--")) {
            builder.add(ListTile(
              leading: const Icon(Icons.phone),
              title: Text(
                'Cell',
                textScaleFactor: globals.textScaleFactor,
                style: TextStyle(
                  fontWeight: FontWeight.bold,
                ),
              ),
              subtitle: Text(
                cell.toString().length > 0 ? cell : "No Number Found",
                textScaleFactor: globals.textScaleFactor,
              ),
              onTap: cell.toString().contains("--")
                  ? null
                  : () {
                      globals.Utility.makePhoneCall(context, cell);
                    },
            ));
          }

          if (office.isNotEmpty && !office.toString().contains("--")) {
            builder.add(ListTile(
              leading: const Icon(Icons.work),
              title: Text(
                'Office',
                textScaleFactor: globals.textScaleFactor,
                style: TextStyle(
                  fontWeight: FontWeight.bold,
                ),
              ),
              subtitle: Text(
                office.toString().length > 0 ? office : "No Number Found",
                textScaleFactor: globals.textScaleFactor,
              ),
              onTap: office.toString().contains("--")
                  ? null
                  : () {
                      globals.Utility.makePhoneCall(context, office);
                    },
            ));
          }
          if (home.isNotEmpty && !home.toString().contains("--")) {
            builder.add(ListTile(
              leading: const Icon(Icons.home),
              title: Text(
                'Home',
                textScaleFactor: globals.textScaleFactor,
                style: TextStyle(
                  fontWeight: FontWeight.bold,
                ),
              ),
              subtitle: Text(
                home.toString().length > 0 ? home : "No Number Found",
                textScaleFactor: globals.textScaleFactor,
              ),
              onTap: home.toString().contains("--")
                  ? null
                  : () {
                      globals.Utility.makePhoneCall(context, home);
                    },
            ));
          }
          if (email.isNotEmpty && !email.contains('No Email Address')) {
            builder.add(ListTile(
              leading: const Icon(Icons.email),
              title: Text(
                'Email',
                textScaleFactor: globals.textScaleFactor,
                style: TextStyle(
                  fontWeight: FontWeight.bold,
                ),
              ),
              subtitle: Text(
                email.toString().length > 0 ? email : "No Email Found",
                textScaleFactor: globals.textScaleFactor,
              ),
              onTap: email.toString().isEmpty
                  ? null
                  : () {
                      globals.Utility.sendEmail(context, email);
                    },
            ));
          }
          if (builder.isEmpty) {
            builder.add(
              ListTile(
                leading: const Icon(Icons.info),
                title: Text(
                  'No Contact Information Found',
                  textScaleFactor: globals.textScaleFactor,
                  style: TextStyle(
                    fontWeight: FontWeight.bold,
                  ),
                ),
              ),
            );
          }
          return builder;
        }

        String _utility1 =
            utility1 == null || utility1.contains("1-1-1800") ? "" : utility1;
        String _utility2 =
            utility2 == null || utility2.contains("1-1-1800") ? "" : utility2;

        var rowCard = Container(
          decoration: BoxDecoration(
              border: Border(bottom: BorderSide(color: Colors.grey[300]))),
          child: Container(
            padding: const EdgeInsets.symmetric(vertical: 10.0, horizontal: 5.0),
            child: new Column(
              children: <Widget>[
                Row(
                  children: <Widget>[
                    Align(
                      child: IconButton(
                        icon: icon,
                        onPressed: iconTapped,
                      ),
                      alignment: FractionalOffset.centerLeft,
                    ),
                    Expanded(
                      child: Column(
                        children: <Widget>[
                          new Align(
                            child: title, //so big text
                            alignment: FractionalOffset.topLeft,
                          ),
                          // new Divider(),
                          new Align(
                            child: detail,
                            alignment: FractionalOffset.topLeft,
                          ),
                          // new Divider(),
                          Row(
                            mainAxisAlignment: MainAxisAlignment.center,
                            crossAxisAlignment: CrossAxisAlignment.center,
                            mainAxisSize: MainAxisSize.min,
                            children: <Widget>[
                              Expanded(
                                child: Container(
                                  margin: const EdgeInsets.all(3.0),
                                  padding: const EdgeInsets.all(3.0),
                                  decoration: BoxDecoration(
                                      border: Border.all(
                                          color: _utility1.length > 1
                                              ? Colors.grey
                                              : Colors.transparent)),
                                  child: Tooltip(
                                    message:
                                        utility1Help == null ? "" : utility1Help,
                                    child: Text(
                                      _utility1,
                                      maxLines: 1,
                                      textAlign: TextAlign.center,
                                      textScaleFactor: globals.textScaleFactor,
                                    ),
                                  ),
                                ),
                              ),
                              Expanded(
                                child: Container(
                                  margin: const EdgeInsets.all(3.0),
                                  padding: const EdgeInsets.all(3.0),
                                  decoration: BoxDecoration(
                                      border: Border.all(
                                          color: _utility2.length > 1
                                              ? Colors.grey
                                              : Colors.transparent)),
                                  child: Tooltip(
                                    message: utility2 == null ? "" : utility2,
                                    child: Text(
                                      _utility2,
                                      maxLines: 1,
                                      textAlign: TextAlign.center,
                                      textScaleFactor: globals.textScaleFactor,
                                    ),
                                  ),
                                ),
                              ),
                            ],
                          ),
                        ],
                      ),
                    ),
                    Align(
                      child: IconButton(
                        icon: Icon(Icons.arrow_drop_down),
                        onPressed: () {
                          showModalBottomSheet<void>(
                              context: context,
                              builder: (BuildContext context) {
                                return Container(
                                    child: Padding(
                                  padding: EdgeInsets.only(bottom: 10.0),
                                  child: SingleChildScrollView(
                                    child: Column(
                                        mainAxisSize: MainAxisSize.min,
                                        children: buildChildren()),
                                  ),
                                ));
                              });
                        },
                      ),
                      alignment: FractionalOffset.centerRight,
                    ),
                  ],
                ),
              ],
            ),
          ),
          // color: globals.isDarkTheme ? Colors.black45 : Colors.white,
        );

        return (rowCard);
      }
    }

而且可以这样使用：

ThreeRowTile(
      icon: Icon(Icons.person),
      title: _contacts?.items[index]?.lastName.toString().isEmpty &&
              _contacts?.items[index]?.firstName.toString().isEmpty
          ? null
          : Text(
              (_contacts?.items[index]?.lastName ?? "") +
                  ", " +
                  (_contacts?.items[index]?.firstName ?? ""),
              textScaleFactor: globals.textScaleFactor,
            ),
      detail: Text(
        _contacts?.items[index]?.lastActivity,
        textScaleFactor: globals.textScaleFactor,
      ),
      utility1: _contacts?.items[index]?.dateCreated,
      utility1Help: 'Date Created',
      utility2: _contacts?.items[index]?.dateModified,
      utility2Help: "Date Modified",
      cell: _contacts?.items[index]?.cell,
      home: _contacts?.items[index]?.home,
      office: _contacts?.items[index]?.office,
      email: _contacts?.items[index]?.email,
      cellTapped: () {
        globals.contactID = _contacts?.items[index]?.contactID;
        Navigator.of(context).pushNamed("/contact_details").then((value) {
          if (globals.infoChanged) {
            _getData("", false).then((newitems) {
              setState(() {
                _contacts = newitems;
              });
            });
          }
        });
      },
    );