我正在制作一個電子商務應用程式，我想制作一個類別 ListView，但我想根據選擇的 ListView 按鈕過濾產品，我嘗試在 setState() 中進行操作，但沒有成功。
這是我使用 de ListView 的應用程式
And when selecting another category, I need the information below the ListView to change too
這是我的 home_page() ：
class HomePage extends StatefulWidget {
const HomePage({Key? key}) : super(key: key);
@override
State<HomePage> createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
int activeIndex = 0;
int selectedIndex = 0;
final urlImages = [
'assets/chair.png',
'assets/table.jpeg',
'assets/lamp.jpeg',
'assets/sillon.jpeg'
];
List category = ['Trending now', 'Sofa', 'Table', 'Chair'];
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text("Home", style: TextStyle(color: Colors.black),),
elevation: 0,
centerTitle: true,
backgroundColor: Colors.transparent,
actions: [
IconButton(icon: const Icon(Icons.qr_code, color: Colors.black,), onPressed: () {
},
),
IconButton(icon: const Icon(Icons.settings, color: Colors.black,), onPressed: () {
Navigator.push(context,
MaterialPageRoute(
builder: (context) => const SettingsAppBar()
)
);
},)
],
leading: IconButton(icon: const Icon(Icons.menu, color: Colors.black,), onPressed: () {
Navigator.push(context,
MaterialPageRoute(
builder: (context) => const MenuAppBar()
)
);
},),
),
body: SafeArea(
child: Stack(
children: [
ListView(
scrollDirection: Axis.vertical,
shrinkWrap: true,
children: [
GestureDetector(
onTap: () {
Navigator.push(context,
MaterialPageRoute(
builder: (context) => Descounts()
)
);
},
child: CarouselSlider.builder(
options: CarouselOptions(height: 250,
enableInfiniteScroll: false,
autoPlay: true,
autoPlayInterval: const Duration(seconds: 3),
onPageChanged: (index, reason){
setState(() {
activeIndex = index;
});
}
),
itemCount: urlImages.length,
itemBuilder: (context, index, realIndex){
final urlImage = urlImages[index];
return buildCard(urlImage, index);
}
),
),
Container(
height: 30,
child: ListView.builder(
physics: const BouncingScrollPhysics(),
scrollDirection: Axis.horizontal,
itemCount: category.length,
itemBuilder: (context, index) => GestureDetector(
onTap: () {
setState(() {
selectedIndex = index;
if (category[selectedIndex] == "Trending now"){
TrendingNow();
}
});
},
child: Container(
alignment: Alignment.center,
margin: const EdgeInsets.only(left: 18),
padding: const EdgeInsets.symmetric(horizontal: 40),
decoration: BoxDecoration(
color: index == selectedIndex
? Colors.deepOrangeAccent
: Colors.grey.shade400,
borderRadius: BorderRadius.circular(40),
),
child: Text(
category[index], style: const TextStyle(color: Colors.white),
),
),
),
),
),
SizedBox(
height: 20,
),
TrendingNow()
],
),
],
),
)
);
}
Widget buildCard(String urlImage, int index) => Container(
width: 430,
padding: const EdgeInsets.symmetric(horizontal: 1),
height: 430,
child: Image.asset(urlImage),
);
}
這是我的 TrendingNow() 課程：
class TrendingNow extends StatefulWidget {
const TrendingNow({Key? key}) : super(key: key);
@override
State<TrendingNow> createState() => _TrendingNowState();
}
class _TrendingNowState extends State<TrendingNow> {
@override
Widget build(BuildContext context) {
return Column(
children: [
GridView.builder(
gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 2,
childAspectRatio: 0.77,
mainAxisSpacing: 10),
itemBuilder: (context, index) =>
ProductSection(
product: furProducts[index],
press: () {
Navigator.push(context,
MaterialPageRoute(
builder: (context) => DetailScreen(product: furProducts[index])
)
);
},
),
shrinkWrap: true,
itemCount: furProducts.length,
physics: const ScrollPhysics(),),
],
);
}
}
我需要的是根據選擇的類別在串列視圖下方顯示不同的資訊
有人能幫我嗎？
uj5u.com熱心網友回復：
首先，您僅將條件用于第一個（趨勢）一個而不用于其他：
onTap: () {
setState(() {
selectedIndex = index;
if (category[selectedIndex] == "Trending now"){
TrendingNow();
}
});
},
將此代碼替換為：
onTap: (){
setState((){
selectedIndex = index;
Navigator.push(MaterialPageRoute(builder: (context) => TrendingNow(index: selectedIndex),),);
});
}
并在trendingNow頁面根據索引呼叫資料
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/506382.html