Question

数据更改时，我需要刷新UI。我有一个ListView来显示包含我的事件的卡片，并且这些事件使用日期选择器进行排序。当我使用日期选择器更改日期时，我需要重新加载页面以显示正确的页面。

我尝试将datepicker数据作为ListView的参数传递，以对ListView中的事件进行排序，我还尝试在使用包含已排序数据列表的参数构建ListView之前对数据进行排序。

我的HomePage类的小部件：

 Widget build(BuildContext context) {

return Scaffold(
  key: _scaffoldKey,
  appBar: AppBar(
    leading: Image.asset('assets/logo2.PNG', fit: BoxFit.contain),
    title: Text(widget.title,style: TextStyle(fontFamily: 'IndieFlower',fontSize: 30,fontWeight: FontWeight.bold),),
    actions: <Widget>[      // Add 3 lines from here...
      new IconButton(icon: const Icon(Icons.account_circle, color: Color(0xFFf50057)), onPressed: _pushSaved, iconSize: 35,),
    ],                      // ... to here.
    centerTitle: true,
    backgroundColor: new Color(0xFF263238),

  ),
  body: FutureBuilder<List<Event>>(
    future: fetchPosts(http.Client()),
    builder: (context, snapshot) {
      //print(convertIntoMap(snapshot.data));
      if (snapshot.hasError) print(snapshot.error);

      return snapshot.hasData
          ? ListViewEvents(posts: sortEvents(snapshot.data), pickerDate: '${dobKey.currentState.dobDate} ' +dobKey.currentState.dobStrMonth +' ${dobKey.currentState.dobYear}')
          : Center(child: CircularProgressIndicator(backgroundColor: Color(0xFFf50057),));
    },
  ),
  bottomNavigationBar  :  BottomAppBar(
    child: Container(height: 100.0,
    alignment: Alignment.topCenter,
    child:
      DatePicker(
          key: dobKey,
          setDate: _setDateOfBirth,
          customItemColor: Color(0xFFf50057),
              customGradient:
                  LinearGradient(begin: Alignment(-0.5, 2.8), colors: [
                Color(0xFFf50057),
                Color(0xFFffcece),
                Color(0xFFf50057),
              ]),
    ),
  ),
  ),
);

} }

这是我的地图：

    List<Event> sortEvents(List<Event> data) {

 List<Event> eventsSelected = new List<Event>();

  for(var index = 0; index < data.length; index++){
    if (data[index].date == 
 //callback of datepicker   
'${dobKey.currentState.dobYear}-${dobKey.currentState.month}-
${dobKey.currentState.dobDate}') {
              eventsSelected.add(data[index]);
    }
  }

  return eventsSelected;

 }

这就是我渲染卡片的方式：

  class ListViewEvents extends StatefulWidget {
  ListViewEvents({Key key, this.posts, this.pickerDate}) : super(key: key);

  final posts;
  final pickerDate;

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

class _ListViewEventsState extends State<ListViewEvents> with 
SingleTickerProviderStateMixin {

  @override
  Widget build(BuildContext context) {
            if(widget.posts.isEmpty) { 
              return  Center(
                child: Text(
                  'No events for this date'
                ),
   );
            }   
      return ListView.builder(
          itemCount: widget.posts.length,
          padding: const EdgeInsets.all(15.0),
          itemBuilder: (context, index) {
        return  Center(
                child: Text(
                  'Title : ${widget.posts[index].title}'
                ),
   );
      },
    );
  }
}

我实际上有一个系统可以显示我的活动卡片，但它不是实时的，我想在日期选择器的数据更改时刷新UI。

Answer 1

列表数据更改时，您需要致电setState()。

  for(var index = 0; index < data.length; index++){
    if (data[index].date == 
 //callback of datepicker   
'${dobKey.currentState.dobYear}-${dobKey.currentState.month}-
${dobKey.currentState.dobDate}') {
              setState(() { eventsSelected.add(data[index]); } ); <--- add it here.
    }
  }

Answer 2

您可以使用setState（）解决此问题，以便在屏幕上发生任何更改时调用setState（）

数据更改时自动刷新用户界面

2 个答案: