Image here我尝试了很多,但我可以做到这一点,我不小心删除了我的代码,如果有人能帮助,我很高兴。
h5qlskok1#
Row( children: [ section( text: 'Small', price: 4.99, bgcolor: Colors.white, textColor: Colors.black, priceColor: Colors.green), const SizedBox(width: 10), section( text: 'Medium', price: 4.99, bgcolor: Colors.red, textColor: Colors.white, priceColor: Colors.white), const SizedBox(width: 10), section( text: 'Large', price: 4.99, bgcolor: Colors.white, textColor: Colors.black, priceColor: Colors.green), const SizedBox(width: 10), ], ) Expanded section( {required String text, required double price, required Color bgcolor, required Color textColor, required Color priceColor}) { return Expanded( child: Container( height: 50, color: bgcolor, child: Column( crossAxisAlignment: CrossAxisAlignment.center, mainAxisAlignment: MainAxisAlignment.center, children: [ Text( text, style: TextStyle(color: textColor), ), const SizedBox(height: 10), Text( '\$$price', style: TextStyle(color: priceColor), ), ], ), )); }
slwdgvem2#
这是一个示例,如果需要,您可以对其进行改进
import 'package:flutter/material.dart'; void main() { runApp(const MyApp()); } class MyApp extends StatefulWidget { const MyApp({super.key}); @override State<MyApp> createState() => _MyAppState(); } class _MyAppState extends State<MyApp> { var plans = <Plan>[]; Plan? selectedPlans; @override initState() { super.initState(); initPlans(); } initPlans() { plans.add(Plan(name: 'Small', price: 4.99)); plans.add(Plan(name: 'Medium', price: 8.99)); plans.add(Plan(name: 'Large', price: 13.99)); } togglePlans(index) { for (var i = 0; i < plans.length; i++) { plans[i].selected = false; } plans[index].selected = true; selectedPlans = plans[index]; } @override Widget build(BuildContext context) { return MaterialApp( debugShowCheckedModeBanner: false, home: SafeArea( child: Scaffold( backgroundColor: const Color(0xffF1DCC4), body: Center( child: Row( mainAxisAlignment: MainAxisAlignment.spaceAround, children: List.generate( plans.length, (index) => InkWell( onTap: () { togglePlans(index); setState(() {}); }, child: PlanCard( plan: plans.elementAt(index), ), ), ), ), ), )), ); } } class PlanCard extends StatelessWidget { final Plan plan; const PlanCard({super.key, required this.plan}); @override Widget build(BuildContext context) { return AnimatedContainer( height: 70, width: 100, margin: const EdgeInsets.symmetric(horizontal: 5), decoration: BoxDecoration( color: plan.selected ? Colors.red : Colors.white, borderRadius: BorderRadius.circular(5), ), duration: const Duration(seconds: 1), child: Column( mainAxisAlignment: MainAxisAlignment.center, children: [ Text( plan.name, style: TextStyle( fontWeight: FontWeight.bold, fontSize: 16, color: plan.selected ? Colors.white : Colors.black, ), ), const SizedBox(height: 5), Text( '${plan.price}\$', style: TextStyle( fontWeight: FontWeight.bold, fontSize: 12, color: plan.selected ? Colors.white38 : Colors.green, ), ) ], ), ); } } class Plan { String name; double price; bool selected; Plan({required this.name, required this.price, this.selected = false}); }
2条答案
按热度按时间h5qlskok1#
slwdgvem2#
这是一个示例,如果需要,您可以对其进行改进