问题

我需要创建这个小部件，但我没有理想。请帮助我。

答案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())
],
),
);
}
}