Flutter如何使用ListTile Threeline

Question

我在使用Flutter的ListTile ThreeLines时，不知道如何使用ThreeLine。

    import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text('ddd'),
        ),
        body:Container(
        child: Column(
          children: <Widget>[
            ListTile(
              isThreeLine: true,
              leading: Icon(Icons.event_note),
              title: Text('Title 1'),
              // subtitle: Text('Title2'),
              subtitle: Column(

                children: <Widget>[
                  Text('Titile2'),
                  Text('Title 3'),
                  Text('Title 4'),
                  Text('and so on')
                ],
              ),

            )
          ],
        ),
      ) ,
      ),

    );
  }
}

当我删除isThreeLines时，代码就可以了

ListTile

谢谢

- zhiyuanbuqi

Answer 1

来自文档:

可选的subtitle值会占用额外一行的空间，如果isThreeLine为真，则会占用两行。

这基本上意味着ListTile的subtitle被赋予更多的空间，可以容纳超过一行的文本：

- soupjake

Answer 2

在Flutter中，默认情况下，ListTile只能显示两行文本：Title和SubTitle。如果有第三行文本需要显示，需要将isThreeLine设置为true，这样就可以显示另外一行了。SubTitle会负责显示第三行文本。如果将isThreeLine设置为true，则预期Subtitle应该是非空的。在Subtitle文本中，"\n"之后的任何文本都会在下一行显示。

ListTile(
              title: Text("First Line",
              style: TextStyle(fontWeight: FontWeight.bold)),
              subtitle: Text("Second One Text "\nThis is Line Third Text"),
              isThreeLine: true,
              trailing: Row(
                mainAxisSize: MainAxisSize.min,
                children: <Widget>[
                  GestureDetector(
                    child: Icon(Icons.delete,color: Colors.red,),
                    onTap: () {
                    },
                  ),
                ],
              ),
              onTap: (){},
            )

- Kumar Krati Gupta

Answer 3

默认情况下，Flutter中的ListTile只能显示两行内容，即标题和副标题。如果需要显示第三行文本，可以将isThreeLine设置为true，从而允许另一行文本的存在。副标题将负责提供第三行文本。如果将isThreeLine设置为true，则预期副标题应该不为null。

- eli