列表小部件状态未在颤振中使用 StatefulBuilder 更新

Question

我的问题是 setstate 不能与 statefulbuilder 和我想更新容器颜色的小部件列表一起使用。 虽然按钮的颜色正在更新。我不确定是什么问题

 Color currentColor = Colors.grey;
 void changecolor(Color color) {
   setState(() {
   currentColor = color;
   });
 }
 List<Widget> list = [];
 @override
Widget build(BuildContext context) {
   return Container(
   child: Stack(
       children: [
         Container(
          height: MediaQuery.of(context).size.height,
           width: MediaQuery.of(context).size.width,
       ),
         Positioned(
            right: 50,
          top: 50,
          child: RaisedButton(
            elevation: 3.0,
             onPressed: () {
              showDialog(
                context: context,
                 builder: (BuildContext context) {
                   return AlertDialog(
                     titlePadding: const EdgeInsets.all(0.0),
                    contentPadding: const EdgeInsets.all           (0.0),
                      content: SingleChildScrollView(
                       child: MaterialPicker(
                        pickerColor: currentColor,
                        onColorChanged: changecolor,
                        enableLabel: true,
                      ),
                   ),
                  );
              },
             );
          },
          child: const Text('Change me'),
          color: currentColor,
          
        ),
      ),
      ...list,
      Positioned(
        left: 50,
        top: 50,
        child: RaisedButton(
          child: Text(
            'Add another Color Sticker',
            style: TextStyle(fontSize: 10),
            ),
            onPressed: () {
               setState(
                () {
                 list.add(
                  StatefulBuilder(
                      builder: (BuildContext context,                     StateSetter setState) {
                         return Positioned(
                           left: 100,
                            top: 100,
                           child: Container(
                             color: currentColor,
                              height: 100,
                             width: 100,
                           ),
                          );
                       },
                     ),
                   );
                 },
               );
             },
            ),
          ),
       ],
      ),
    );

谁能帮我解决这个问题我无法理解为什么它没有更新容器的颜色 提前致谢。

Answer 1

您可以在下面复制粘贴运行完整代码
在这种情况下，您可以使用ValueNotifier<Color> 和ValueListenableBuilder
代码sn-p

ValueNotifier<Color> currentColor = ValueNotifier(Colors.grey);
...
MaterialPicker(
    pickerColor: currentColor.value,
...
child: const Text('Change me'),
              color: currentColor.value,
...
list.add(ValueListenableBuilder(
                        valueListenable: currentColor,
                        builder: (BuildContext context, Color current,
                            Widget child) {
                          return Positioned(
                            left: 100,
                            top: 100,
                            child: Container(
                              color: current,
                              height: 100,
                              width: 100,
                            ),
                          );
                        }));    

工作演示

完整代码

import 'package:flutter/material.dart';
import 'package:flutter_colorpicker/flutter_colorpicker.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Test(),
    );
  }
}

class Test extends StatefulWidget {
  @override
  _TestState createState() => _TestState();
}

class _TestState extends State<Test> {
  ValueNotifier<Color> currentColor = ValueNotifier(Colors.grey);

  void changecolor(Color color) {
    setState(() {
      currentColor.value = color;
    });
  }

  List<Widget> list = [];

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Stack(
        children: [
          Container(
            height: MediaQuery.of(context).size.height,
            width: MediaQuery.of(context).size.width,
          ),
          Positioned(
            right: 50,
            top: 50,
            child: RaisedButton(
              elevation: 3.0,
              onPressed: () {
                showDialog(
                  context: context,
                  builder: (BuildContext context) {
                    return AlertDialog(
                      titlePadding: const EdgeInsets.all(0.0),
                      contentPadding: const EdgeInsets.all(0.0),
                      content: SingleChildScrollView(
                        child: MaterialPicker(
                          pickerColor: currentColor.value,
                          onColorChanged: changecolor,
                          enableLabel: true,
                        ),
                      ),
                    );
                  },
                );
              },
              child: const Text('Change me'),
              color: currentColor.value,
            ),
          ),
          ...list,
          Positioned(
            left: 50,
            top: 50,
            child: RaisedButton(
              child: Text(
                'Add another Color Sticker',
                style: TextStyle(fontSize: 10),
              ),
              onPressed: () {
                setState(
                  () {
                    list.add(ValueListenableBuilder(
                        valueListenable: currentColor,
                        builder: (BuildContext context, Color current,
                            Widget child) {
                          return Positioned(
                            left: 100,
                            top: 100,
                            child: Container(
                              color: current,
                              height: 100,
                              width: 100,
                            ),
                          );
                        }));
                  },
                );
              },
            ),
          ),
        ],
      ),
    );
  }
}