我是 Flutter 状态管理的新手。我想要根据该视频的相同功能。 https://streamable.com/6zm375?src=player-page-share。当用户单击按钮时,必须显示“添加项目”按钮,我们可以添加项目。
这是这个“ADD”小部件的代码。
Padding(
padding: const EdgeInsets.only(right: 15, top: 50,),
child: SizedBox(
width: 102,
height: 58,
child: Container(
padding: const EdgeInsets.all(5),
decoration: BoxDecoration(
border: Border.all(color: Colors.white),
color: Colors.white,
borderRadius: BorderRadius.circular(6),
),
child:
const Center(
child: Text('Add', style: TextStyle(fontSize: 23, fontWeight: FontWeight.w700,
color: Color(0XFFDF2C25)),)),
),
//child: Icon(CupertinoIcon),
),
),
您可以通过在 Flutter 中使用 ValueNotifier 来实现相同的目的。
https://www.youtube.com/watch?v=s-ZG-jS5QHQ
创建一个名为
cartItems
的 ValueNotifier
final ValueNotifier<int> cartItems = ValueNotifier<int>(0);
每当您单击添加按钮时,请使用
cartItems
更新
cartItems.value=cartItems.value+1;
的值
您可以使用
cartItems
valueNotifier 的 ValueListenableBuilder 包装底部栏的计数小部件,每当 cartItems
值发生变化时,它将更新计数 UI。
了解更多: https://medium.flutterdevs.com/exploring-valuelistenablebuilder-in-flutter-9a16fc4c4c5b
final ValueNotifier<int> cartItems = ValueNotifier<int>(0);
class MyWidget extends StatelessWidget {
const MyWidget({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text("Dummy"),
),
body: Center(
child: ValueListenableBuilder<int>(
valueListenable: cartItems,
builder: (context, value, child) => Text("$value"),
),
),
floatingActionButton: IconButton(
onPressed: () {
cartItems.value = cartItems.value + 1;
},
icon: const Icon(Icons.add),
),
);
}
}