我想做一个过滤器功能。当我选择一个过滤器，然后我从API获取数据，并改变用户界面。
用户界面如下所示。
然后我调试数据，当我选择过滤器时，数据被更改，但UI没有更改。
这是我的客户页面代码CustomerPage code ]
class _CustomerPageState extends State<CustomerPage> {
getCustomer({String? filter}) async {
EasyLoading.show(status: 'Loading . . .');
await Provider.of<CustomerProvider>(context, listen: false)
.getCustomer(filter: filter);
EasyLoading.dismiss();
}
@override
Widget build(BuildContext context) {
CustomerProvider customerProvider = Provider.of<CustomerProvider>(context);
return Consumer<CustomerProvider>(
builder: (context, customer, _) => Scaffold(
backgroundColor: Colors.white,
floatingActionButton: FloatingActionButton(
onPressed: () {
showModalBottomSheet(
shape: const RoundedRectangleBorder(
borderRadius:
BorderRadius.vertical(top: Radius.circular(30))),
context: context,
builder: (context) {
return StatefulBuilder(builder: (context, setState) {
return SizedBox(
height: 200,
width: MediaQuery.of(context).size.width,
child: Padding(
padding: const EdgeInsets.all(20.0),
child: Column(
children: [
const SizedBox(height: 20),
Row(
mainAxisAlignment:
MainAxisAlignment.spaceAround,
children: [
TextButton(
onPressed: () {
getCustomer(filter: 'all');
Navigator.pop(context);
},
style: TextButton.styleFrom(
backgroundColor: primaryColor),
child: Text('All',
style: whiteTextStyle.copyWith(
fontSize: 13,
fontWeight: medium))),
TextButton(
onPressed: () {
getCustomer(filter: 'suspect');
Navigator.pop(context);
},
style: TextButton.styleFrom(
backgroundColor: primaryColor),
child: Text('Suspect',
style: whiteTextStyle.copyWith(
fontSize: 13,
fontWeight: medium))),
TextButton(
onPressed: () {
getCustomer(filter: 'low');
Navigator.pop(context);
},
style: TextButton.styleFrom(
backgroundColor: primaryColor),
child: Text('Low',
style: whiteTextStyle.copyWith(
fontSize: 13,
fontWeight: medium))),
TextButton(
onPressed: () {
getCustomer(filter: 'medium');
Navigator.pop(context);
},
style: TextButton.styleFrom(
backgroundColor: primaryColor),
child: Text('Medium',
style: whiteTextStyle.copyWith(
fontSize: 13,
fontWeight: medium)))
],
),
],
),
),
);
});
},
);
},
backgroundColor: primaryColor,
child: Icon(
Icons.filter_list_rounded,
size: 30,
color: accentColor,
),
),
appBar: AppBar(
automaticallyImplyLeading: false,
elevation: 0,
backgroundColor: primaryColor,
title: RichText(
text: TextSpan(
text: 'Pelanggan ',
style: whiteTextStyle.copyWith(
fontSize: 25, fontWeight: bold),
children: <TextSpan>[
TextSpan(
text:
'(${customer.responseCustomer?.data?.length})',
style: whiteTextStyle.copyWith(
fontSize: 15, fontWeight: bold))
]),
),
),
body: Padding(
padding: const EdgeInsets.all(10.0),
child: Column(
children: [
SizedBox(
width: MediaQuery.of(context).size.width,
height: MediaQuery.of(context).size.height - 166,
child: ChangeNotifierProvider(
create: (context) => CustomerProvider(),
child: GridView.builder(
gridDelegate:
const SliverGridDelegateWithMaxCrossAxisExtent(
maxCrossAxisExtent: 200,
childAspectRatio: 3 / 2,
crossAxisSpacing: 3,
mainAxisSpacing: 5),
itemCount: customer.responseCustomer?.data?.length,
itemBuilder: (context, index) {
return Card(
elevation: 4,
color: secondaryColor,
child: InkWell(
splashColor: accentColor,
onTap: () {
debugPrint('index number $index tapped');
},
child: Padding(
padding: const EdgeInsets.all(7.0),
child: Column(
crossAxisAlignment:
CrossAxisAlignment.start,
children: [
Row(
mainAxisAlignment:
MainAxisAlignment.center,
children: [
Icon(
Icons.account_circle_rounded,
size: 40,
color: accentColor,
)
],
),
// const SizedBox(height: 7),
Text(
'${customer.responseCustomer?.data?[index].nmCustomer}',
style: whiteTextStyle.copyWith(
fontSize: 13, fontWeight: bold),
),
Text(
'+62 ${customer.responseCustomer?.data?[index].hpCustomer}',
style: whiteTextStyle.copyWith(
fontSize: 13, fontWeight: bold),
),
],
),
),
),
);
},
),
)),
],
),
),
));
}
}这是我的Provider类
class CustomerProvider with ChangeNotifier {
ResponseCustomer? _responseCustomer;
ResponseCustomer? get responseCustomer => _responseCustomer;
set responseCustomer(ResponseCustomer? responseCustomer) {
_responseCustomer = responseCustomer;
notifyListeners();
}
Future<ResponseCustomer> getCustomer({String? filter}) async {
ResponseCustomer responseCustomer =
await CustomerService().getCustomer(filter: filter);
_responseCustomer = responseCustomer;
debugPrint(responseCustomer.data?.length.toString());
return responseCustomer;
}
}我在UI中做错了什么吗？提前感谢
1条答案
按热度按时间mklgxw1f1#
你犯了一个很简单的错误。
只需添加以下代码。
和添加notify监听器
而且不管功能如何，我认为下面的代码更好。
在客户页面中
把A改为B
A类
B
把A改为B
A类
B