Question

我现在正在学习颤抖..并试图从Web服务中检索一些数据并将其显示在列表中...

正在这样做：

getcompanies() async {
var url = 'my link';
http.post(url, body: json.encode({'token': globals.token})).then((response) {
// print("Response body: ${response.body}");
Map data = json.decode(response.body);
final companies =
    (data['Companies'] as List).map((i) => new Company.fromJson(i));
for (final company in companies) {
  if (!company.category.contains("الراعي") &&
      !company.category.contains("الشريك") &&
      !company.category.contains("الداعم")) {
    if (company.logo != "") {
      names.add(company.name);
      logos.add(company.logo);
    }
  }
}
 });
}

class Company {
 String name;
 String category;
 String logo;

Company.fromJson(Map json) {
this.name = json['Name'];
this.category = json['Category'];
this.logo = json['Logo'];
}
}

// Home page...
class CompaniesPage extends StatefulWidget {
@override
State<StatefulWidget> createState() {
return new _CompaniesPageState();
}
}

class _CompaniesPageState extends State<CompaniesPage> {
@override
Widget build(BuildContext context) {
getcompanies();
return new Directionality(
  textDirection: TextDirection.rtl,
  child: new Scaffold(
    appBar: AppBar(
      iconTheme: IconThemeData(color: Color(0xFF49C275)),
      backgroundColor: Colors.white,
      title: Text(
        'الشركات',
        textDirection: TextDirection.rtl,
        textAlign: TextAlign.left,
        style: TextStyle(
          color: Color(0xFF49C275),
          fontSize: 18.0,
        ),
      ),
      actions: <Widget>[
        // action button
        IconButton(
          icon: new Image.asset(
            'assets/images/searchicon.png',
            width: 19.0,
            height: 19.0,
          ),
          onPressed: () {},
        ),
      ],
    ),
    drawer: new Drawer(
      child: new ListView(
        children: <Widget>[
          new DrawerHeader(
            child: new Image.asset(
              'assets/images/logo.png',
              height: 149.0,
              width: 149.0,
              alignment: Alignment.center,
            ),
          ),
          new ListTile(
            title: new Text('الرئيسية'),
            onTap: () {
              homePage();
            },
          ),
          new ListTile(
            title: new Text('الشركات'),
            onTap: () {
              Navigator.pop(context);
            },
          ),
          new ListTile(
            title: new Text('الرعاة'),
            onTap: () {
              sponsersPage();
            },
          ),
          new ListTile(
            title: new Text('حسابي'),
            onTap: () {
              myaccountPage();
            },
          ),
          new ListTile(
            title: new Text('كودي'),
            onTap: () {
              myqrPage();
            },
          ),
          new ListTile(
            title: new Text('من نحن'),
            onTap: () {
              aboutusPage();
            },
          ),
          new ListTile(
            title: new Text('تواصل معنا'),
            onTap: () {
              contactusPage();
            },
          ),
          new ListTile(
            title: new Text('تسجيل خروج'),
            onTap: () {},
          ),
          new ListTile(
            title: new Text('English'),
            onTap: () {},
          ),
        ],
      ),
    ),
    body: new Padding(
      padding: new EdgeInsets.only(top: 15.0),
      child: new Center(
        child: new ListView(
          children: createCompaniesChildren(),
        ),
      ),
    ),
  ),
);
}

 List<Widget> createCompaniesChildren() {
 List<Widget> children = List<Widget>();
 for (int i = 0; i < names.length; i++) {
  children.add(
    new Padding(
      padding: new EdgeInsets.only(right: 15.0, left: 15.0),
      child: new Image.network(
        logos[i],
        width: 346.0,
        height: 180.0,
      ),
    ),
  );
  children.add(
    new Padding(
      padding: new EdgeInsets.only(right: 15.0, left: 15.0),
      child: new Center(
        child: new Text(
          names[i],
          style: new TextStyle(color: Colors.black, fontSize: 17.0),
          textAlign: TextAlign.center,
        ),
      ),
    ),
  );
  children.add(new Divider());
  }
  return children;
  }

正在检索所有内容..但是直到我转到另一页然后返回此页面时，它才显示它。我可以看到列表..否则，当第一次打开时为空...

该如何解决？我希望列表在页面启动后立即显示...

尝试这样做：

getcompanies() async {
var url = 'my link';
http
    .post(url, body: json.encode({'token': globals.token}))
    .then((response) {
  // print("Response body: ${response.body}");
  Map data = json.decode(response.body);
  final companies =
  (data['Companies'] as List).map((i) => new Company.fromJson(i));
  setState(() {
    for (final company in companies) {
      if (!company.category.contains("الراعي") &&
          !company.category.contains("الشريك") &&
          !company.category.contains("الداعم")) {
        if (company.logo != "") {
          names.add(company.name);
          logos.add(company.logo);
        }
      }
    }
  });
});
}

现在它可以按我的要求正常工作！

Answer 1

从服务器检索数据后，您不会告诉flutter重新构建窗口小部件。

您可能需要添加

setState(() { for (final company in companies) { ..... }})

setState将触发小部件重建。

首先，在构建窗口小部件时，名称列表为空，以便在用服务器数据填充列表后，只有列表视图为空，您需要调用setState告诉窗口小部件重新构建。

Answer 2

完成列表更新后，

调用setState()方法。此方法将自动渲染屏幕。

aaaaaa，不要忘记将方法getCompanies()放在StatefulWidget中，即_CompaniesPageState

class _CompaniesPageState extends State<CompaniesPage> {
    getcompanies() async {
     var url = 'my link';
     http.post(url, body: json.encode({
      'token': globals.token
     })).then((response) {
      // print("Response body: ${response.body}");
      Map data = json.decode(response.body);
      final companies =
       (data['Companies'] as List).map((i) => new Company.fromJson(i));
      for (final company in companies) {
       if (!company.category.contains("الراعي") &&
        !company.category.contains("الشريك") &&
        !company.category.contains("الداعم")) {
        if (company.logo != "") {
         names.add(company.name);
         logos.add(company.logo);
        }
       }
      }
      //*here*
      setState(() -> {});
     });
    }
    @override 
    Widget build(context) {
        ....
    }
  }

方法setState()从State类继承。

从网络服务波动中获取数据

2 个答案: