如何获取 ListView.builder 的命令？

Question

我对 Flutter 很陌生，我试图将命令添加到我的 ListView.builder

  Widget orderListView() {
    return ListView.builder(
        itemBuilder: (context, getOrders) => Card(
              child: ListTile(
                title: Text(getOrders.toString()),
                onTap: () => print('$getOrders'),
              ),
            ));
  }
}

基本上我需要在我的列表视图中显示订单列表

  Future<String> getOrders() async {
    return await
    http
        .post(
        Uri.parse('https://somerandomurl.com/admin/get_orders'),
        body: "{\"token\": \"admin_token\"}",
        headers: headers)
        .then((response) {
      print('Response status: ${response.statusCode}');
      print('Response body: ${response.body}');
      // return response.body;
    }).catchError((error) {
      print("Error: $error");
      // return error;
    });
  }

这是我的 getOrders 命令。当我打开我的列表视图屏幕时，是否可以获得我的订单列表并显示它？

Answer 1

我不确定您遇到了什么问题，但您的代码存在一些突出问题以及您希望它如何成为可能，但这是可能的，但您没有以正确的方式进行。首先，getOrders() 方法必须是 List<String> 类型，因为它是一个订单列表。

所以把它更新成这样：

Future<List<String>> getOrders() async {
    var orders = await http
    .post(
    Uri.parse('https://somerandomurl.com/admin/get_orders'),
    body: "{\"token\": \"admin_token\"}",
    headers: headers)
    .then((response) {
      print('Response status: ${response.statusCode}');
      print('Response body: ${response.body}');
      // return response.body;
    }).catchError((error) {
      print("Error: $error");
      // return error;
    });
    return orders;
}

既然您的方法返回的是一个列表而不是单个值，您可以按如下方式更新您的列表视图方法：

Widget orderListView(List<String> orders) {
    return ListView.builder(
        itemCount: orders.length, // You need this or it'll error
        itemBuilder: (context, index) {
            // Instead of saying orders[index] you can also do this:
            var item = orders[index]
            
            // You shouldn't use both a `Card` and a `ListTile`, Choose 
            // one
            return ListTile(
            title: Text(orders[index].toString()),
            onTap: () => print(orders[index]),
          ),
        }
    );
}

但这还不够。因为这是Future，所以您必须在某处调用它才能返回数据。有许多很棒的软件包可以帮助简化此过程，但如果没有，您可以这样做：

所以无论你的这个屏幕被称为什么，确保它是一个有状态的小部件。更新其余方法并合并 FutureBuilder：

import 'package:flutter/material.dart';

class MyOrdersWidget extends StatefulWidget {
  const MyOrdersWidget({ Key? key }) : super(key: key);

  @override
  _MyOrdersWidgetState createState() => _MyOrdersWidgetState();
}

class _MyOrdersWidgetState extends State<MyOrdersWidget> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: _body(),
    );
  }

  Widget _body() {
    return FutureBuilder<List<String>>(
      future: getOrders(),
      initialData: const [],
      builder: (context, snapshot) {
        if(snapshot.data == null) return Text('Loading');
        if(snapshot.error == null) return Text('Error');
        if(snapshot.data!.length == 0) return Text('No Orders');
        return orderListView(snapshot.data);
      },
    );
  }
}

就像我之前说的，因为你是 Flutter 的新手，我强烈建议你使用一个包来帮助你进行这种开发。对于 http 请求，使用 Dio package，对于管理期货，FutureBuilder 可以，但我个人喜欢使用 flutter_riverpod，这里有一个 video。