我只需要从 api 获取文本标题和文本描述答案

【问题标题】：I just need to get the text title and text description from the api我只需要从 api 获取文本标题和文本描述
【发布时间】：2021-11-11 02:13:51
【问题描述】：

这是我的 JSON

[ 
    {
        "id": 1,
        "title": "Всем моим братьям салам",
        "description": "Салам всем моим братьям",
        "created_at": "2021-09-14T23:55:23.000000Z",
        "updated_at": "2021-09-14T23:55:23.000000Z"
    },
]

我的代码

            Column(
              children: [
                Container(
                  margin: EdgeInsets.only(top: 52.w, right: 25.w, left: 25.w),
                  padding: EdgeInsets.symmetric(horizontal: 20.w),
                  width: 355.w,
                  child: Text('',
                    style: TextStyle(color: Colors.white, fontSize: 29.sp),
                  ),
                ),
                Container(
                  margin: EdgeInsets.only(top: 20.w, right: 25.w, left: 25.w),
                  padding: EdgeInsets.symmetric(horizontal: 20.w),
                  width: 319.w,
                  child: Text(
                   '',
                    style: TextStyle(color: Colors.white, fontSize: 16.sp),
                  ),
                ),
              ],
            ),

【问题讨论】：

如果您从 API 获取数据，请参考我的回答 here 或 here 或 here 希望对您有所帮助

标签： json flutter text containers

【解决方案1】：

首先，您从数据中创建一个列表，然后将列表传递给ListView.builder
HTTP 请求函数

Future<List<Item>> _getItemdata (String url) async {

Uri url = Uri.parse(url);
final response = await http.get(url);
var data = jsonDecode(response.body);

print('data: $data');
return data.map((itemJson) => Item.fromJson(itemJson)).toList();
}

模型类

class Item {
  int id;
  String title;
  String description;
  String createdAt;
  String updatedAt;

  Item({this.id, this.title, this.description, this.createdAt, this.updatedAt});

  Item.fromJson(Map<String, dynamic> json) {
    id = json['id'];
    title = json['title'];
    description = json['description'];
    createdAt = json['created_at'];
    updatedAt = json['updated_at'];
  }

  Map<String, dynamic> toJson() {
    final Map<String, dynamic> data = new Map<String, dynamic>();
    data['id'] = this.id;
    data['title'] = this.title;
    data['description'] = this.description;
    data['created_at'] = this.createdAt;
    data['updated_at'] = this.updatedAt;
    return data;
  }
}

获取列表

List<Item> itemList = await getItemData("your url");

用户界面：

ListView.builder(
shrinkWrap: true,
physics: ScrollPhysics(),
itemCount: itemList.length;
itemBuilder:(context, index){
return Column(
              children: [
                Container(
                  margin: EdgeInsets.only(top: 52.w, right: 25.w, left: 25.w),
                  padding: EdgeInsets.symmetric(horizontal: 20.w),
                  width: 355.w,
                  child: Text("${itemList[index].title}",
                    style: TextStyle(color: Colors.white, fontSize: 29.sp),
                  ),
                ),
                Container(
                  margin: EdgeInsets.only(top: 20.w, right: 25.w, left: 25.w),
                  padding: EdgeInsets.symmetric(horizontal: 20.w),
                  width: 319.w,
                  child: Text(
                   Text("${itemList[index].description}",
                    style: TextStyle(color: Colors.white, fontSize: 16.sp),
                  ),
                ),
              ],
            );
}
)

【讨论】：

在哪里添加我的 URL 地址？
在 getData 下添加 url，如果它会 api 调用你调用 getdata 在未来的构建器而不是 listview 构建器
你可以写一个例子添加一个URL

【解决方案2】：

对于给定的一段代码，让我假设你的 json 数据被分配给一个变量“数据”。

var newData = json.decode(data);
String title = newData[0]["title"];
String subTitle = newData[0]["description"];

【讨论】：