当用户单击按钮时如何更改所需的布局，然后添加项目按钮必须出现在 Flutter 中

Question

我是 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),
   ),
   ),

Answer 1

您可以通过在 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),
      ),
    );
  }
}