Flutter 如何根据 JSON API 的状态更改颜色

Posted 2023-02-23

【中文标题】Flutter 如何根据 JSON API 的状态更改颜色

【英文标题】：Flutter how to change color depending status from JSON API

【发布时间】：2019-12-08 13:15:57

【问题描述】：

我想根据 JSON API 中的状态动态更改框颜色。 例如，Approved = Colors.green，Rejected = Colors.red，Submitted = Colors.blue。

this is the image of my current app 我在状态下划线

如何实现？

这就是我获取 API 的方式：

Future getCalendar() async
  List<Events> list;

    String api = "http://200.0.0.104/api/dynamic/uspGetCalendarEvents_mobile?EmployeeId=5";
    var res = await http.get(Uri.encodeFull(api), headers: "Accept": "application/json");

        var data = json.decode(res.body);
        var rest = data["data"] as List;
        list = rest.map<Events>((json) => Events.fromJson(json)).toList();

    return list;
  

这就是我循环数据的方式：

getCalendar().then((data)

          for (var a =0; a <  data.length; a++ )
          
             _events.addAll(DateTime.parse(data[a].start.toString().replaceAll("-", "")) :  data[a].title.toString().split(",")  );
          
    );

这是我的小部件：

 Widget _buildEventList() 
    return ListView(
      children: _selectedEvents
          .map((event) => Container(
                decoration: BoxDecoration(
                  color: Colors.blue, // i want to change the color
                  border: Border.all(width: 0.8),
                  borderRadius: BorderRadius.circular(12.0),
                ),
                margin: const EdgeInsets.symmetric(horizontal: 8.0, vertical: 4.0),
                child: ListTile(
                  title: Text(event.toString()),
                  onTap: () => print('$event tapped!'),
                ),
              ))
          .toList(),
    );
  

【参考方案1】：

您可以创建一个方法来根据条件返回颜色（假设 event.toString() = Rejected ，Approved 或 Submitted）：

Color _getColorByEvent(String event) 
  if (event == "Approved") return Colors.green;
  if (event == "Rejected") return Colors.red;
  return Colors.blue;


...

BoxDecoration(
                color: _getColorByEvent(event.toString()), // i want to change the color
                border: Border.all(width: 0.8),
                borderRadius: BorderRadius.circular(12.0),
              ),

【参考方案2】：

颜色调用方法举例

 return ListView(
children: _selectedEvents
    .map((event) => Container(
          decoration: BoxDecoration(
            color: Colors.blue, // i want to change the color
            border: Border.all(width: 0.8),
            borderRadius: BorderRadius.circular(12.0),
          ),
          margin: const EdgeInsets.symmetric(horizontal: 8.0, vertical: 4.0),
          child: ListTile(
            title: Text(event.toString()),
            onTap: () => print('$event tapped!'),
          ),
        ))
    .toList(),
  );



Color _getColor(Map event) swith(event)  return value  

【参考方案3】：

像这样创建一个映射键值对。

  Map<String, Color> colorCode ="Approved":Colors.green,"Rejected":Colors.red;
eg:- 
    final color=colorCode["Approved"];

然后将键传递给映射，您将获得相应键的值。

【参考方案4】：

我就是这样做的......

Color getColorForStatus(OrderStatus event) 
      switch (event) 
        case OrderStatus.PLACED:
          return Colors.black;
          break;
        case OrderStatus.ORDER_CONFIRMED:
          return Colors.lightBlue;
          break;
        case OrderStatus.OUT_FOR_DELIVERY:
          return new Color(0xFFE5AC0E);
          break;
        case OrderStatus.DELIVERED:
          return Colors.green;
          break;
        case OrderStatus.PAYMENT_DECLINED:
          return new Color(0xFFFFA401);
          break;
        case OrderStatus.CANCELED:
          return Colors.red;
          break;
        default:
          return Colors.black;
          break;