如何在颤振中使用简单的滑块显示产品列表?

Question

这就是任务每当使用滑块时，滑块值为产品价格，只有产品显示在滑块值.....

下ex -如果滑块值为20000，则只显示价格在20000以下的产品。我想在flutter中用map方法来做这个。

任务是无论何时使用滑块，其中滑块值为产品价格，只有产品显示在滑块值.....

ex -如果滑块值为20000，则只显示价格在20000以下的产品。我想在flutter中用map方法来做这个。

enter code here
import 'package:flutter/material.dart';
void main() {
runApp(
MaterialApp(
debugShowCheckedModeBanner: false,
home: MyApp(),
),
);
}
class MyApp extends StatefulWidget {
MyApp({Key? key}) : super(key: key);
@override
State<MyApp> createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
int i = 0;
double _value = 0;
List a = [];
List product = [
{'id': '1', 'name': 'Watch', 'price': '3200', 'category': 'wearable'},
{'id': '2', 'name': 'T-Shirt', 'price': '520', 'category': 'wearable'},
{'id': '3', 'name': 'Jeans', 'price': '840', 'category': 'wearable'},
{
'id': '4',
'name': 'refrigerator',
'price': '1800',
'category': 'wearable'
},
];
@override
Widget build(BuildContext context) {
double h = MediaQuery.of(context).size.height;
double w = MediaQuery.of(context).size.width;
return Scaffold(
resizeToAvoidBottomInset: false,
appBar: AppBar(
title: const Text(
"Products Filter",
style: TextStyle(
color: Colors.white,
),
),
centerTitle: true,
backgroundColor: Colors.blue,
),
body: SingleChildScrollView(
child: Column(
children: [
Slider(
min: 0,
max: 80000,
onChanged: (double value) {
setState(() {
i++;
_value = value;
// if (product[1]['price'] < _value) {
a.add(product);

});
},
value: _value,
),
Text(
"All Products < Rs. ${_value.toInt()}",
style: const TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
),
const Padding(padding: EdgeInsets.only(bottom: 20)),
Column(
children: a.map((e) {
return Container(
height: 80,
width: w,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(10)),
child: Row(
children: [
Expanded(
flex: 1,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [Text(product[i]['id'])],
),
),
const Padding(padding: EdgeInsets.only(right: 0)),
Expanded(
flex: 2,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(product[i]['name']),
Text(product[i]['category'])
],
),
),
Expanded(
flex: 1,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(product[i]['price']),
],
),
)
],
),
);
}).toList(),
),
],
),
),
);
}
}

Answer 1

你可以在你的地图中添加一个条件:

product.map((e) {
if (double.parse(e['price']) < _value) { 
return YourWidget()
}
return Container() 
}

你需要改变你的setState并删除a.add(product)行

完整代码:

import 'package:flutter/material.dart';
void main() {
runApp(
MaterialApp(
debugShowCheckedModeBanner: false,
home: MyApp(),
),
);
}
class MyApp extends StatefulWidget {
MyApp({Key? key}) : super(key: key);
@override
State<MyApp> createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
double _value = 0;
List product = [
{'id': '1', 'name': 'Watch', 'price': '3200', 'category': 'wearable'},
{'id': '2', 'name': 'T-Shirt', 'price': '520', 'category': 'wearable'},
{'id': '3', 'name': 'Jeans', 'price': '840', 'category': 'wearable'},
{
'id': '4',
'name': 'refrigerator',
'price': '1800',
'category': 'wearable'
},
];
@override
Widget build(BuildContext context) {
double h = MediaQuery.of(context).size.height;
double w = MediaQuery.of(context).size.width;
return Scaffold(
resizeToAvoidBottomInset: false,
appBar: AppBar(
title: const Text(
"Products Filter",
style: TextStyle(
color: Colors.white,
),
),
centerTitle: true,
backgroundColor: Colors.blue,
),
body: SingleChildScrollView(
child: Column(
children: [
Slider(
min: 0,
max: 80000,
onChanged: (double value) {
setState(() {
_value = value;
});
},
value: _value,
),
Text(
"All Products < Rs. ${_value.toInt()}",
style: const TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
),
const Padding(padding: EdgeInsets.only(bottom: 20)),
Column(
children: product.map((e) {
if (double.parse(e['price']) < _value) {
return Container(
height: 80,
width: w,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(10)),
child: Row(
children: [
Expanded(
flex: 1,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [Text(e['id'])],
),
),
const Padding(padding: EdgeInsets.only(right: 0)),
Expanded(
flex: 2,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.start,
children: [Text(e['name']), Text(e['category'])],
),
),
Expanded(
flex: 1,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(e['price']),
],
),
)
],
),
);
}
return Container();
}).toList(),
),
],
),
),
);
}
}