簡體   English   中英

Flutter ListTile 標題名稱來自 json

[英]Flutter ListTile title name from json

我試圖在 listtile flutter 中顯示一個人的兩個名字作為標題。 這是示例 json 文件

var users = const [
    {
       "first_name": "melissa",
       "last_name": "fleming",
       "phone_number": "0740-304-475"
    },
    {
      "first_name": "christoffer",
      "last_name": "christiansen",
      "phone_number": "05761325"
    },
    {
      "first_name": "valtteri",
      "last_name": "pulkkinen",
      "phone_number": "041-829-79-61"
    }
]

這是 flutter 代碼

 @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        centerTitle: true,
        title: Text(
          "List of Customers",
      ),
      
      body: ListView.separated(
        itemCount: users.length,
        separatorBuilder: (context, index) => Divider(),
        itemBuilder: (BuildContext context, int index) {
          var user = users[index];
          return ListTile(
            title: Text(user['first_name']),
            isThreeLine: true,
          );
        },
      ),
    );
  }

如何將兩個名稱都傳遞給這部分

title: Text(user['first_name']),

您可以在循環中使用 for 並將值存儲在字符串中

for(var i in users){
String name = i['first_name'] + " "+ i['last_name'];
print(name);}



ListView.separated(
    itemCount: users.length,
    separatorBuilder: (context, index) => Divider(),
    itemBuilder: (BuildContext context, int index) {
      var user = users[index];
      return ListTile(
        title: Text(name),
        isThreeLine: true,
      );
    },
  ),

有兩種方法可以做到。

第一種方法:如果你想顯示全名作為標題:

title : Text("$users[0]['first_name'] $users[0]['last_name']")

第二種方法:如果要分別顯示名字和姓氏,請使用字幕:

ListTile(
  leading: const Icon(Icons.flight_land),
  title: const Text($users[0]['first_name']),
  subtitle: Text($users[0]['last_name']),
  onTap: () { /* react to the tile being tapped */ }
)

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM