英文:
How to create this flutter widget?
问题
我需要创建这个小部件，但我没有理想。请帮助我。
答案1
得分: 0
class HomePage extends StatefulWidget {
const HomePage({super.key});
@override
State<HomePage> createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
//创建一个变量来存储选定的索引
int selectedIndex = 0;
//虚拟列表包含每个项目的索引
final List<Model2> list = [
Model2(
text: '09:00',
temp: '34 C',
iconData: Icons.cloudy_snowing,
),
Model2(
text: '10:00',
temp: '34 C',
iconData: Icons.cloudy_snowing,
),
Model2(
text: 'Now',
temp: '34 C',
iconData: Icons.cloudy_snowing,
),
Model2(
text: '12:00',
temp: '34 C',
iconData: Icons.cloudy_snowing,
),
Model2(
text: '13:00',
temp: '34 C',
iconData: Icons.cloudy_snowing,
),
];
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.black,
body: Column(
crossAxisAlignment: CrossAxisAlignment.end,
mainAxisAlignment: MainAxisAlignment.end,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: list.map((e) {
return InkWell(
onTap: () {
//将选定的索引值更改为项目索引
setState(() {
selectedIndex = list.indexOf(e);
});
},
child: Container(
padding: const EdgeInsets.symmetric(horizontal: 14, vertical: 8),
//在选择项目时显示装饰
decoration: selectedIndex == list.indexOf(e)
? BoxDecoration(
borderRadius: const BorderRadius.only(
topLeft: Radius.circular(14),
topRight: Radius.circular(14)),
gradient: LinearGradient(
colors: [
Colors.white.withOpacity(0.5),
Colors.transparent,
],
begin: Alignment.topCenter,
end: Alignment.bottomCenter))
: null,
child: Column(
children: [
Text(
e.text,
style: const TextStyle(color: Colors.white),
),
Icon(
e.iconData,
color: Colors.white,
),
Text(
e.temp,
style: const TextStyle(color: Colors.white),
),
if (selectedIndex == list.indexOf(e))
const SizedBox(
height: 40,
),
],
),
),
);
}).toList())
],
),
);
}
}
英文:
class HomePage extends StatefulWidget {
const HomePage({super.key});
@override
State<HomePage> createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
//create a variable to store selected index
int selectedIndex = 0;
//dummy list contains index of every item
final List<Model2> list = [
Model2(
text: '09:00',
temp: '34 C',
iconData: Icons.cloudy_snowing,
),
Model2(
text: '10:00',
temp: '34 C',
iconData: Icons.cloudy_snowing,
),
Model2(
text: 'Now',
temp: '34 C',
iconData: Icons.cloudy_snowing,
),
Model2(
text: '12:00',
temp: '34 C',
iconData: Icons.cloudy_snowing,
),
Model2(
text: '13:00',
temp: '34 C',
iconData: Icons.cloudy_snowing,
),
];
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.black,
body: Column(
crossAxisAlignment: CrossAxisAlignment.end,
mainAxisAlignment: MainAxisAlignment.end,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: list.map((e) {
return InkWell(
onTap: () {
//change the selected index value to item index
setState(() {
selectedIndex = list.indexOf(e);
});
},
child: Container(
padding:
const EdgeInsets.symmetric(horizontal: 14, vertical: 8),
//to show the decoration when an item is selected
decoration: selectedIndex == list.indexOf(e)
? BoxDecoration(
borderRadius: const BorderRadius.only(
topLeft: Radius.circular(14),
topRight: Radius.circular(14)),
gradient: LinearGradient(
colors: [
Colors.white.withOpacity(0.5),
Colors.transparent,
],
begin: Alignment.topCenter,
end: Alignment.bottomCenter))
: null,
child: Column(
children: [
Text(
e.text,
style: const TextStyle(color: Colors.white),
),
Icon(
e.iconData,
color: Colors.white,
),
Text(
e.temp,
style: const TextStyle(color: Colors.white),
),
if (selectedIndex == list.indexOf(e))
const SizedBox(
height: 40,
),
],
),
),
);
}).toList())
],
),
);
}
}
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论