时间戳

首页 > 解决方案 > 如何在不按任何按钮的情况下自动在 Flutter Android 应用程序的 ListView 内实现 AlertDialog 框？

flutter - 如何在不按任何按钮的情况下自动在 Flutter Android 应用程序的 ListView 内实现 AlertDialog 框？

问题描述

我正在做一个项目，我创建了一个 RestApi，其中有汽车数据，并且每 3 秒更新一次。这些汽车位于 4 条道路的交界处，现在，当一辆汽车驶向一条特定的道路时id，将"is_green"变为->将变为绿色，这将表明汽车是否正在驶来现在我的问题是 我怎么能实现一个盒子，它会在包含 value时自动弹出，而无需按下任何按钮。我是新来的，所以我不知道该怎么做......请帮帮我trueListViewCircleAvtarAlertDialogbool isGreen = userData[index]["is_green"]true

import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;
import 'dart:async';
import 'dart:convert';

void main() {
  runApp(MaterialApp(
    debugShowCheckedModeBanner: false,
    theme: ThemeData.dark(),
    home: Home(),
  ));
}

class Home extends StatefulWidget {
  Home({Key key}) : super(key: key);
  @override
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> {
  Map data;
  List userData;
  Future getData() async {
    print("updating data...");
    http.Response response = await http.get("http://10.100.101.154:3000/xd");
    data = jsonDecode(response.body);
    setState(() {
      userData = data["data"];
    });
  }

  @override
  void initState() {
    super.initState();

    Timer.periodic(new Duration(seconds: 3), (timer) {
      getData();
    });

  }

  Color getColor(bool isGreen) {
    if (isGreen == true) {
      return Colors.green;
    } else {
      return Colors.red;
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('SGH'),
        centerTitle: true,
      ),
      body: ListView.builder(
          itemCount: userData == null ? 0 : userData.length,
          itemBuilder: (BuildContext context, int index) {
            bool isGreen = userData[index]["is_green"];
            return Card(
              child: Row(
                children: <Widget>[
                  Padding(
                    padding: EdgeInsets.all(10),
                    child: CircleAvatar(
                      backgroundColor: getColor(isGreen),
                      minRadius: 6,
                    ),
                  ),
                  Padding(
                    padding: EdgeInsets.all(10),
                    child: Wrap(
                      direction: Axis.horizontal,
                      children: <Widget>[
                        Text(
                          "Road Id = ${userData[index]["id"]} \CarInQueue = ${userData[index]["car_que"]} \nIsGreen ? --> ${userData[index]["is_green"]} ",
                          style: TextStyle(
                              fontSize: 20, fontWeight: FontWeight.bold),
                        ),
                      ],
                    ),
                  ),
                ],
              ),
            );
          }),
    );
  }
}

标签： flutterflutter-listviewflutter-alertdialog

解决方案

只需在您更新汽车列表的任何时候检查...然后显示Dialog有关哪辆车正在穿越的信息

Future getData() async {
    print("updating data...");
    http.Response response = await http.get("http://10.100.101.154:3000/xd");
    data = jsonDecode(response.body);
    setState(() {
      userData = data["data"];
    });
    checkDialog();
  }


checkDialog(){
var item = userData.where((car)=>car["is_green"]).first;//this is the first car where is_green is true
if(item!=null){
        showDialog(context:context,
        builder:(BuildContext context)=>AlertDialog( 
          //.... content here
         ));
}
}

推荐阅读