如何设置列表视图尾随填充

Question

我正在使用 listview.builder 显示 api 数据，我想设置文本填充，这是输出

我想在日期后设置批准和未批准的文本。

这是我的代码


ListTile(
       leading:  CircleAvatar(
       radius: 25,
       backgroundColor:snapshot.data[index].type=="Sick"?Color(int.parse(annualboxcolor)):Color(int.parse(maternityboxcolor)),
       child: Container(
       padding: EdgeInsets.fromLTRB(0, 10, 0, 0),
       child:Column(children: <Widget>[
       Text(snapshot.data[index].noofdays.toString(),style: TextStyle(fontSize: 15.0,fontWeight: FontWeight.bold,color:Colors.white),),  
       Text(int.parse(snapshot.data[index].noofdays)>1?"Days":"Day",style: TextStyle(fontSize: 10.0,color:Colors.white),)
       ]
                            
     ),
     )),
    title: Text(snapshot.data[index].type),
    subtitle: Text(snapshot.data[index].fromdate+" To "+snapshot.data[index].todate),
    trailing: Text(snapshot.data[index].Status=="ON"?"Approved":"Not Approved"),),
Container(padding: EdgeInsets.fromLTRB(80, 55, 0, 0),
                          child:Text(snapshot.data[index].Status=="ON"?"Approved":"Not Approved",
                            style: TextStyle(color:snapshot.data[index].Status=="ON"?Colors.green:Colors.red ),),),

我使用了容器并设置了它的填充，但我想在 listtile

中这样做

Answer 1

而不是使用 trailing，将 isThreeLine 设置为 true，这使得 ListTile 显示 3 行文本而不是 2 行。之后，使 subtitle 包含数据和批准状态的两行字符串，如下所示：

ListTile(
    // your existing code
    isThreeLine: true,
    // concatenate you strings, this is just an example,
    // mind the `\n`, it makes new line
    subtitle: Text("2021-02-02 To 2021-03-03\nNot Approved"),
    // don't use trailing
    // trailing: 
)

如果您需要不同的样式，还有另一种方法，使用 subtitle 中的 Column，并添加单独的 Text 小部件：

ListTile(
    // ...
    isThreeLine: true,
    subtitle: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
            Text("2021-02-02 To 2021-03-03",
                style: TextStyle(color: Colors.green)),
            Text("Not Approved", 
                style: TextStyle(color: Colors.red))
        ],
    )
)

Answer 2

试试下面的代码希望它对你使用 isThreeLine 而不是尾随有帮助

ListTile( 
    leading: CircleAvtar(
           child:Text('Sick'),
     ),
      title: Text('Sick'),
      subtitle:Text('Your Date\n Approved'),
     isThreeLine:true,
),

如何设置列表视图尾随填充

How to set the listview trailing padding

android-listview

flutter