如何在Flutter中居中放置一个ListTile的标题

问题描述：

今天我一直在尝试再次将一个Flutter ListTile的标题居中。在过去的几天里，我花了一两个小时搜索并尝试了一些东西，然后放弃了我的酷和放弃。如何在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)), 
    ) 
), 
];

请帮我解决这个问题，并在哪里可以找到扑了视频课程？

好的，如果这样继续下去，我将不再是灰色的，我会变成秃头的。

我以为我在向文本对象添加'textAlign：TextAlign.center'的时候解决了这个问题。没有红线，但文字仍然左对齐。

答

我不知道你尝试过什么，但是你为了中心title的ListTile可以使用center小部件就像你在你的代码做，或小部件中包装你的文字，并设置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"), 
     ); 
     }), 
    ), 
    ); 
    }

使用部件：

@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一个自定义的widget简单的例子，但有较大的物品打交道时更加灵活和可定制：

@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),)) 
        ],), 
       ], 
      ), 
      ); 
      }), 
     ) 
    ); 
    }

如何在Flutter中居中放置一个ListTile的标题

相关推荐