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

Question

今天我一直在尝试将Flutter ListTile的标题集中在一起.在过去的几天里,我花了一两个小时的谷歌搜索和尝试的东西,然后失去了我的冷静和放弃.

我只是学习Flutter并喜欢这个概念,但却找不到视频培训课程(Lynda.com,uDemy.com等).我已阅读相关文档,但无法摆脱我尝试将其应用于我的代码时出现的所有红线.

语法中必须有逻辑,但在2周之后我还没有完成它.

回到问题,我试过了

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

我不知道你尝试过什么,但你以居中title的ListTile,你可以使用一个center小部件就像你在你的代码做,或内包装你的文本Row控件和设置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),))
                    ],),
                ],
              ),
            );
          }),
        )
    );
  }