Flutter Repetead小部件，因为索引
您好，我正在尝试在更多小部件之间滚动，我从一个项目的GitHub中获取了一个示例。问题是如何删除创建同一小部件8次的索引。我想用不同的照片和不同的描述对每个小部件进行个性化设置。现在，第一个小部件被复制了8次 代码如下：Flutter Repetead小部件，因为索引,flutter,Flutter,您好，我正在尝试在更多小部件之间滚动，我从一个项目的GitHub中获取了一个示例。问题是如何删除创建同一小部件8次的索引。我想用不同的照片和不同的描述对每个小部件进行个性化设置。现在，第一个小部件被复制了8次 代码如下： import 'package:flutter/material.dart'; import 'package:folding_cell/folding_cell.dart'; import 'package:google_fonts/google_fonts.dart'; i
import 'package:flutter/material.dart';
import 'package:folding_cell/folding_cell.dart';
import 'package:google_fonts/google_fonts.dart';
import 'package:carousel_slider/carousel_controller.dart';
import 'package:carousel_slider/carousel_options.dart';
import 'package:carousel_slider/carousel_slider.dart';
import 'package:flutter/rendering.dart';
import 'elementpagedetail.dart';
class Homepage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: ElementMainPage(),
);
}
}
class ElementMainPage extends StatefulWidget {
@override
_ElementMainPageState createState() => _ElementMainPageState();
}
class _ElementMainPageState extends State<ElementMainPage> {
PageController _pageController = PageController(viewportFraction: 0.7);
double _indicatorHeight = 35.45;
int _pageIndex = 0;
List<String> _heroTag = ["1", "2", "3", "4", "5", "6", "7", "8", "9"];
List<String> _heroTextTag = List.generate(10, (index) => "t$index");
@override
void initState() {
// TODO: implement initState
super.initState();
}
@override
Widget build(BuildContext context) {
// _indicatorHeight = MediaQuery.of(context).size.height / 2.6 / 8;
// print(MediaQuery.of(context).size.height / 2.6 / 8);
return Scaffold(
body: SafeArea(
child: Column(
children: [
Expanded(
flex: 3,
child: Padding(
padding: const EdgeInsets.all(16.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
children: [
Text(
"#Letsknoweachotherbetter",
style: TextStyle(
fontWeight: FontWeight.bold,
),
),
Spacer(),
Container(
height: 32,
width: 32,
decoration: BoxDecoration(
border: Border.all(color: Colors.grey),
shape: BoxShape.circle),
child: Center(
child: Icon(
Icons.search,
size: 18,
),
),
),
IconButton(icon: Icon(Icons.list), onPressed: () {})
],
),
Text(
"Unknown",
style: TextStyle(fontSize: 38),
),
Text(
"questions",
style: TextStyle(
fontSize: 38, fontWeight: FontWeight.bold),
)
],
),
)),
Expanded(
flex: 8,
child: Row(
children: [
Expanded(
flex: 2,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
"01",
style: TextStyle(
color: Colors.indigoAccent[700],
fontWeight: FontWeight.bold),
),
Padding(
padding: const EdgeInsets.symmetric(vertical: 12),
child: Container(
width: 6,
height:
MediaQuery.of(context).size.height / 2.6,
decoration: BoxDecoration(
color: Colors.grey[400],
borderRadius: BorderRadius.circular(8)),
child: Stack(
children: [
AnimatedContainer(
height: _indicatorHeight,
decoration: BoxDecoration(
color: Colors.indigoAccent[700],
borderRadius:
BorderRadius.circular(8)),
duration: Duration(milliseconds: 500),
),
],
),
),
),
Text(
"08",
style: TextStyle(
color: Colors.indigoAccent[700],
fontWeight: FontWeight.bold),
),
],
)),
Expanded(
flex: 8,
child: Stack(
children: [
Positioned(
left: 0,
right: 0,
bottom: 160,
top: 0,
child: PageView.builder(
controller: _pageController,
onPageChanged: (value) {
setState(() {
_pageIndex = value + 1;
if (value == 0) {
_indicatorHeight =
MediaQuery.of(context).size.height /
2.6 /
8;
} else {
_indicatorHeight =
MediaQuery.of(context).size.height /
2.6 /
8 *
(value + 1);
}
print(_indicatorHeight);
print(value.toString());
});
},
itemCount: 8,
itemBuilder: (context, index) {
return GestureDetector(
onTap: () {
Navigator.of(context).push(
MaterialPageRoute(
builder: (context) =>
ElementDetailPage(
_heroTag[index],
_heroTextTag[index])));
},
child: Hero(
tag: _heroTag[index],
child: Container(
margin: EdgeInsets.only(
left: 16, right: 16, bottom: 24),
decoration: BoxDecoration(
boxShadow: [
BoxShadow(
color: Colors.black
.withOpacity(0.2),
spreadRadius: -4,
blurRadius: 4,
offset: Offset(-4, 24))
],
color: Colors.indigoAccent[700],
image: DecorationImage(
image: NetworkImage(
"https://i.pinimg.com/564x/f9/54/87/f95487ddee97d480f621aa27fc924443.jpg"),
fit: BoxFit.cover),
borderRadius:
BorderRadius.circular(24)),
padding: EdgeInsets.all(16),
child: Column(
crossAxisAlignment:
CrossAxisAlignment.start,
children: [
Spacer(),
Container(
height: 48,
width: 48,
decoration: BoxDecoration(
color: Colors.white
.withOpacity(0.5),
borderRadius:
BorderRadius.circular(8)),
child: Center(
child: Text(
"20",
style: TextStyle(
fontWeight:
FontWeight.bold,
color: Colors.white,
fontSize: 18),
),
),
),
SizedBox(
height: 8,
),
Text(
"questions to adress",
style: TextStyle(
fontSize: 16,
color: Colors.white,
),
),
Text(
"Unknown Stage",
style: TextStyle(
fontSize: 24,
color: Colors.white,
fontWeight: FontWeight.bold,
),
)
],
),
),
),
);
},
),
),
Positioned(
bottom: 16,
left: 16,
right: 16,
child: Column(
children: [
Row(
mainAxisAlignment:
MainAxisAlignment.spaceBetween,
children: [
Text(
"0$_pageIndex",
style: TextStyle(
color: Colors.indigoAccent[700],
fontWeight: FontWeight.bold),
),
Text("/09"),
Spacer(),
Container(
height: 28,
width: 64,
decoration: BoxDecoration(
border: Border.all(
color: Colors.indigoAccent[700]),
borderRadius:
BorderRadius.circular(24),
),
child: Center(
child: Text(
"See all",
style: TextStyle(
fontWeight: FontWeight.bold,
color:
Colors.indigoAccent[700]),
),
),
),
],
),
SizedBox(
height: 8,
),
Container(
height: 72,
child: ListView(
scrollDirection: Axis.horizontal,
children: [
Column(
children: [
Container(
height: 54,
width: 54,
decoration: BoxDecoration(
color:
Colors.indigoAccent[700],
borderRadius:
BorderRadius.circular(
16)),
),
Text(
"Unknown",
style: TextStyle(
fontWeight: FontWeight.bold,
color:
Colors.indigoAccent[700],
fontSize: 12),
)
],
),
SizedBox(
width: 24,
),
Column(
children: [
Container(
height: 54,
width: 54,
decoration: BoxDecoration(
color: Colors.grey,
borderRadius:
BorderRadius.circular(
16)),
),
Text(
"Friends",
style: TextStyle(
fontWeight: FontWeight.bold,
color: Colors.grey,
fontSize: 12),
)
],
),
SizedBox(
width: 24,
),
Column(
children: [
Container(
height: 54,
width: 54,
decoration: BoxDecoration(
color: Colors.grey,
borderRadius:
BorderRadius.circular(
16)),
),
Text(
"Lovers",
style: TextStyle(
fontWeight: FontWeight.bold,
color: Colors.grey,
fontSize: 12),
)
],
),
SizedBox(
width: 24,
),
Column(
children: [
Container(
height: 54,
width: 54,
decoration: BoxDecoration(
color: Colors.grey,
borderRadius:
BorderRadius.circular(
16)),
),
Text(
"Stranger",
style: TextStyle(
fontWeight: FontWeight.bold,
color: Colors.grey,
fontSize: 12),
)
],
),
SizedBox(
width: 24,
),
Column(
children: [
Container(
height: 54,
width: 54,
decoration: BoxDecoration(
color: Colors.white,
borderRadius:
BorderRadius.circular(
16)),
),
Text(
"Enemy",
style: TextStyle(
fontWeight: FontWeight.bold,
color: Colors.grey,
fontSize: 12),
)
],
)
],
),
)
],
),
)
],
)),
],
)),
],
),
),
);
}
}
导入“包装：颤振/材料.省道”；
进口“包装：折叠单元/折叠单元.省道”；
导入“package:google_fonts/google_fonts.dart”；
导入“package:carousel_滑块/carousel_控制器.dart”；
导入“package:carousel_滑块/carousel_选项.dart”；
导入“package:carousel_slider/carousel_slider.dart”；
导入“package:flatter/rendering.dart”；
导入'elementpagedetail.dart'；
类主页扩展了无状态小部件{
@凌驾
小部件构建（构建上下文）{
返回材料PP(
主页：ElementMainPage（），
);
}
}
class ElementMainPage扩展StatefulWidget{
@凌驾
_ElementMainPageState createState（）=>\u ElementMainPageState（）；
}
类_ElementMainPageState扩展状态{
PageController _PageController=PageController（视口分数：0.7）；
双指示器高度=35.45；
int _pageIndex=0；
列表_heroTag=[“1”、“2”、“3”、“4”、“5”、“6”、“7”、“8”、“9”]；
List _heroTextTag=List.generate（10，（index）=>“t$index”）；
@凌驾
void initState（）{
//TODO:实现initState
super.initState（）；
}
@凌驾
小部件构建（构建上下文）{
//_indicatorHeight=MediaQuery.of（context）.size.height/2.6/8；
//打印（MediaQuery.of（context.size.height/2.6/8）；
返回脚手架(
正文：安全区(
子：列(
儿童：[
扩大(
弹性：3，
孩子：填充(
填充：常数边集全部（16.0），
子：列(
crossAxisAlignment:crossAxisAlignment.start，
儿童：[
划船(
儿童：[
正文(
“#让我们彼此了解更好”，
样式：TextStyle(
fontWeight:fontWeight.bold，
),
),
垫片（），
容器(
身高：32，
宽度：32，
装饰：盒子装饰(
边框：边框。全部（颜色：颜色。灰色），
形状：长方形。圆形），
儿童：中心(
子：图标(
Icons.search，
尺码：18，
),
),
),
图标按钮（图标：图标（Icons.list），按下：（）{}）
],
),
正文(
“未知”，
样式：TextStyle（字体大小：38），
),
正文(
“问题”，
样式：TextStyle(
fontSize:38，fontWeight:fontWeight.bold），
)
],
),
)),
扩大(
弹性：8，
孩子：排(
儿童：[
扩大(
弹性：2，
子：列(
mainAxisAlignment:mainAxisAlignment.center，
儿童：[
正文(
"01",
样式：TextStyle(
颜色：颜色。靛蓝色[700]，
fontWeight:fontWeight.bold），
),
填充物(
填充：常量边集。对称（垂直：12），
子：容器(
宽度：6，
高度：
MediaQuery.of（context）.size.height/2.6，
装饰：盒子装饰(
颜色：颜色。灰色[400]，
边界半径：边界半径。圆形（8）），
子：堆栈(
儿童：[
动画容器(
高度：_指示器高度，
装饰：盒子装饰(
颜色：颜色。靛蓝色[700]，
边界半径：
边界半径。圆形（8）），
持续时间：持续时间（毫秒：500），
),
],
),
),
),
正文(
"08",
样式：TextStyle(
颜色：颜色。靛蓝色[700]，
fontWeight:fontWeight.bold），
),
],
)),
扩大(
弹性：8，
子：堆栈(
儿童：[
定位(
左:0,，
右:0,，
底图：160，
排名：0，
class CardModalClass {
String unkownStage;
String questionToAddress;
int indexNumber;
int backgroundImage;
CardModalClass(
{this.unkownStage,
this.questionToAddress,
this.indexNumber,
this.backgroundImage});
}
List<CardModalClass> cardModalClassList = [
new CardModalClass(
unkownStage: "a", questionToAddress: "frist", indexNumber: 1),
new CardModalClass(
unkownStage: "b", questionToAddress: "second", indexNumber: 2),
new CardModalClass(
unkownStage: "c", questionToAddress: "thrid", indexNumber: 3),
new CardModalClass(
unkownStage: "d", questionToAddress: "fourht", indexNumber: 4),
new CardModalClass(
unkownStage: "e", questionToAddress: "fifth", indexNumber: 5),
new CardModalClass(
unkownStage: "f", questionToAddress: "sixth", indexNumber: 6),
new CardModalClass(
unkownStage: "g", questionToAddress: "seventh", indexNumber: 7),
new CardModalClass(
unkownStage: "h", questionToAddress: "eight", indexNumber: 8),
];
PageView.builder(
controller: _pageController,
onPageChanged: (value) {
setState(() {
_pageIndex = value + 1;
if (value == 0) {
_indicatorHeight =
MediaQuery.of(context).size.height /
2.6 /
8;
} else {
_indicatorHeight =
MediaQuery.of(context).size.height /
2.6 /
8 *
(value + 1);
}
print(_indicatorHeight);
print(value.toString());
});
},
itemCount: cardModalClassList.length,
itemBuilder: (context, index) {
CardModalClass cardModalClassItem =
cardModalClassList[index];
return GestureDetector(
onTap: () {
// Navigator.of(context).push(
// MaterialPageRoute(
// builder: (context) =>
// ElementDetailPage(
// _heroTag[index],
// _heroTextTag[index])));
},
child: Hero(
tag: _heroTag[index],
child: Container(
margin: EdgeInsets.only(
left: 16, right: 16, bottom: 24),
decoration: BoxDecoration(
boxShadow: [
BoxShadow(
color: Colors.black
.withOpacity(0.2),
spreadRadius: -4,
blurRadius: 4,
offset: Offset(-4, 24))
],
color: Colors.indigoAccent[700],
image: DecorationImage(
image: NetworkImage(
"https://i.pinimg.com/564x/f9/54/87/f95487ddee97d480f621aa27fc924443.jpg"),
fit: BoxFit.cover),
borderRadius:
BorderRadius.circular(24)),
padding: EdgeInsets.all(16),
child: Column(
crossAxisAlignment:
CrossAxisAlignment.start,
children: [
Spacer(),
Container(
height: 48,
width: 48,
decoration: BoxDecoration(
color: Colors.white
.withOpacity(0.5),
borderRadius:
BorderRadius.circular(8)),
child: Center(
child: Text(
"${cardModalClassItem.indexNumber}",
style: TextStyle(
fontWeight:
FontWeight.bold,
color: Colors.white,
fontSize: 18),
),
),
),
SizedBox(
height: 8,
),
Text(
"${cardModalClassItem.questionToAddress}",
style: TextStyle(
fontSize: 16,
color: Colors.white,
),
),
Text(
"${cardModalClassItem.unkownStage}",
style: TextStyle(
fontSize: 24,
color: Colors.white,
fontWeight: FontWeight.bold,
),
)
],
),
),
),
);
},
),