Flutter flatter |如何从不同的小部件更改小部件的颜色？

我是个新手，我甚至不知道该怎么问，我希望你能理解我的问题

因此，我正在尝试制作一个简单的应用程序，它显示

SvgPicture.assets（）

，用户可以使用颜色选择器更改

SvgPicture（）

的颜色

我有两个小部件：

用于显示

SvgPicture（）

调用它

Svg.dart

main.dart

包含

BottomNavigationView

，其中一个选项卡打开颜色选择器，

Svg.dart

我在

setState（{}）

中遇到了一些错误，但我设法修复了错误，但它没有改变颜色，当我尝试更改

main.dart的背景色时，它工作得非常好

这是我的密码：


ontimtap（）
底部导航栏的方法

  void _onItemTap(int index) {
  setState(() {
    if (index == 0) {
    // First Tab
    }
    if (index == 1) {
    // SecondTab
    }
    if (index == 2) {
    // Third Tab
    }
    if (index == 3) {
      showDialog(
        context: context,
        builder: (BuildContext context){
          return AlertDialog(
            content:
            SingleChildScrollView(
              child: new ColorPicker(
                pickerColor: Colors.red,
                onColorChanged: (Color colorChanged) {
                  color = colorChanged;
           // (color) is assigned default value of Colors.red
           // here I'm trying to assign new value to (color)
                },
              ),//ColorPicker
            ),//SingleChildScrollView
          );//AlertDialog
        });
    }
  });
}


然后在
Svg.dart
中，我创建了另一个变量
Color picked=Colors.red
，并将红色指定为默认值。这就是
Svg.dart
小部件代码的外观：

  Widget build(BuildContext context) {
  setState(() {
    picked = main().createState().color;
  });
  return CustomMultiChildLayout(
    delegate: TempDelegate(
        position: Offset.zero
    ),
    children: [
      buildLayoutId(ids.shirtId, MyConstants.shirt, picked)
    ],
  );
}
LayoutId buildLayoutId(Object id, String item, Color color) {
  return LayoutId(
      id: id,
      child: SvgPicture.asset(
        item,
        color: color,
      ),
    );
}



我试图寻找颤振文档，但我真的不知道问题出在哪里，也没有找到教程，请帮助

编辑

这是
main.dart

    class Main extends StatefulWidget{
      @override
      _MainState createState() => _MainState();
    }
    
    class _Main extends State<Main> {
      int _slectedIndex = 0;
      Color color = MyConstants.darkWhite;
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          backgroundColor: Colors.black,
          body: Center(
            child: Svg(),
          ),
          bottomNavigationBar: BottomNavigationBar(
            items: const<BottomNavigationBarItem>[
              BottomNavigationBarItem(
                label: "",
                icon: Icon(Icons.home),
              ),
              BottomNavigationBarItem(
                label: "",
                icon: Icon(Icons.home),
              ),
              BottomNavigationBarItem(
                label: "",
                icon: Icon(Icons.home),
              ),
              BottomNavigationBarItem(
                label: "",
                icon: Icon(Icons.home),
              ),
            ],
            onTap: _onItemTap,
          ),
        );
      }
    
      void _onItemTap(int index) {
        setState(() {
          if (index == 0) {
    // do something
          }
          if (index == 1) {
    // do something
          }
    
          if (index == 2) {
    // do something
          }
    
          if (index == 3) {
            showDialog(
              context: context,
              builder: (BuildContext context){
                return AlertDialog(
                  content:
                  SingleChildScrollView(
                    child: new ColorPicker(
                      pickerColor: Colors.red,
                      onColorChanged: (Color colorChanged) {
                        setState(() {
                          color = colorChanged;
                        });
                      },
                    ),
                  ),
                );
              });
          }
        });
      }
    }

class Svg extends StatefulWidget{
  //Color picked;
  @override
  SvgState createState() => Svg();
}

class SvgState extends State<Svg> {
  @override
  Widget build(BuildContext context) {
    return CustomMultiChildLayout(
      delegate: SvgDelegate(
          position: Offset.zero
      ),
      children: [
        buildLayoutId(ids.shirtId, MyConstants.shirt, CreateKit().createState().color)
      ],
    );
  }
  LayoutId buildLayoutId(Object id, String item, Color color) {
    return LayoutId(
        id: id,
        child: SvgPicture.asset(
          item,
          color: color,
        ),
      );
  }
}

class SvgDelegate extends MultiChildLayoutDelegate{
  final Offset position;
  SvgDelegate({
    this.position
});
  @override
  void performLayout(Size size) {

    Size leadSize = Size.zero;
    itemLayout(leadSize, size, ids.shirtId);
  }    
  void itemLayout(Size leadSize, Size size, Object id) {
    if(hasChild(id)){
      leadSize = layoutChild(
        id,
        BoxConstraints.loose(size),
      );
    }
  }    
  @override
  bool shouldRelayout(TempDelegate oldDelegate) {
    return oldDelegate.position != position;
  }   
}

在
Svg.dart

    class Main extends StatefulWidget{
      @override
      _MainState createState() => _MainState();
    }
    
    class _Main extends State<Main> {
      int _slectedIndex = 0;
      Color color = MyConstants.darkWhite;
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          backgroundColor: Colors.black,
          body: Center(
            child: Svg(),
          ),
          bottomNavigationBar: BottomNavigationBar(
            items: const<BottomNavigationBarItem>[
              BottomNavigationBarItem(
                label: "",
                icon: Icon(Icons.home),
              ),
              BottomNavigationBarItem(
                label: "",
                icon: Icon(Icons.home),
              ),
              BottomNavigationBarItem(
                label: "",
                icon: Icon(Icons.home),
              ),
              BottomNavigationBarItem(
                label: "",
                icon: Icon(Icons.home),
              ),
            ],
            onTap: _onItemTap,
          ),
        );
      }
    
      void _onItemTap(int index) {
        setState(() {
          if (index == 0) {
    // do something
          }
          if (index == 1) {
    // do something
          }
    
          if (index == 2) {
    // do something
          }
    
          if (index == 3) {
            showDialog(
              context: context,
              builder: (BuildContext context){
                return AlertDialog(
                  content:
                  SingleChildScrollView(
                    child: new ColorPicker(
                      pickerColor: Colors.red,
                      onColorChanged: (Color colorChanged) {
                        setState(() {
                          color = colorChanged;
                        });
                      },
                    ),
                  ),
                );
              });
          }
        });
      }
    }

class Svg extends StatefulWidget{
  //Color picked;
  @override
  SvgState createState() => Svg();
}

class SvgState extends State<Svg> {
  @override
  Widget build(BuildContext context) {
    return CustomMultiChildLayout(
      delegate: SvgDelegate(
          position: Offset.zero
      ),
      children: [
        buildLayoutId(ids.shirtId, MyConstants.shirt, CreateKit().createState().color)
      ],
    );
  }
  LayoutId buildLayoutId(Object id, String item, Color color) {
    return LayoutId(
        id: id,
        child: SvgPicture.asset(
          item,
          color: color,
        ),
      );
  }
}

class SvgDelegate extends MultiChildLayoutDelegate{
  final Offset position;
  SvgDelegate({
    this.position
});
  @override
  void performLayout(Size size) {

    Size leadSize = Size.zero;
    itemLayout(leadSize, size, ids.shirtId);
  }    
  void itemLayout(Size leadSize, Size size, Object id) {
    if(hasChild(id)){
      leadSize = layoutChild(
        id,
        BoxConstraints.loose(size),
      );
    }
  }    
  @override
  bool shouldRelayout(TempDelegate oldDelegate) {
    return oldDelegate.position != position;
  }   
}

请更改默认选取器颜色值，请指定包含任何颜色值的变量，然后onTabItem更改变量的值

颜色_Color=Colors.red

ColorPicker（pickerColor:_color，onColorChanged:(color colorChanged）{setState（（）=>_color=colorChanged；}，}，），
在Flatter中，一切都是一个小部件，您可以创建自己的自定义小部件。
同样，也有层次结构和状态等概念

无状态小部件是一个
无状态小部件
，例如标签、背景、标题等

有状态小部件是一个
StatefulWidget
是一个可以更改的东西，例如开关、动画背景、页面等。还有一个
InheritedWidget
，但这是另一个主题

setState
用于
StatefulWidget
更新该小部件的状态，要从父部件更新子部件，可以使用子部件的属性。
调用
setState
时，它会在必要时重建小部件及其子部件

容器
小部件具有
颜色
属性

容器(
颜色：colorParent，
)

您的自定义小部件还可以具有任何属性，例如
color
或
size
或
colorChild

ChildWidget(
colorChild:colorParent，
)

当您想要访问
StatefulWidget
的
colorChild
属性时，您可以使用
widget.colorChild
，当它没有状态时，您可以简单地使用
colorChild

导入“包装：颤振/材料.省道”；
void main（）{
runApp（MyApp（））；
}
类MyApp扩展了无状态小部件{
@凌驾
小部件构建（构建上下文）{
返回材料PP(
主题：ThemeData.dark（），
debugShowCheckedModeBanner:false，
家：脚手架(
appBar:appBar（），
正文：中(
子项：父项（），
),
),
);
}
}
类父级扩展StatefulWidget{
@凌驾
ParentState createState（）=>ParentState（）；
}
类ParentState扩展了状态{
//在父对象中定义颜色
Color colorParent=Colors.red；
@凌驾
小部件构建（构建上下文）{
返回脚手架(
背景颜色：Colors.white，
正文：中(
孩子：排(
mainAxisSize:mainAxisSize.min，
儿童：[
//将颜色作为属性传递
ChildWidget（colorChild:colorParent），
垂直分隔器（颜色：colorParent），
Child2Widget（colorChild:colorParent），
],
),
),
底部导航栏：底部导航栏(
项目：常数[
底部导航气压计(
标签：“点击至蓝色”，
图标：图标（Icons.home），
),
底部导航气压计(
标签：“点击至橙色”，
图标：图标（图标.仪表板），
),
底部导航气压计(
标签：“点击至绿色”，
图标：图标（Icons.palete），
),
// ...
],
onTap:\u ONITAP，
),
);
}
无效的MTAP（索引）{
// ...
开关（索引）{
案例0：
设置状态（）{
//更新父项中的颜色
colorParent=Colors.blue；
});
打破
案例1：
设置状态（）{
colorParent=Colors.orange；
});
打破
案例2：
设置状态（）{
colorParent=Colors.green；
});
打破
}
}
}
类ChildWidget扩展StatefulWidget{
//在子对象中定义颜色
最终色系；
constchildwidget（{Key-Key，this.colorChild}）：super（Key:Key）；
@凌驾
ChildWidgetState createState（）=>ChildWidgetState（）；
}
类ChildWidgetState扩展了状态{
@凌驾
小部件构建（构建上下文）{
返回容器(
身高：100，
宽度：100，
//使用它
颜色：widget.colorChild，
子：文本（“子1”），
);
}
}
类Child2Widget扩展了无状态widget{
//在子对象中定义颜色
最终色系；
constchild2widget（{Key-Key，this.colorChild}）：super（Key:Key）；
@凌驾
小部件构建（构建上下文）{
返回容器(
身高：100，
宽度：100，
//使用它
颜色：colorChild，
子：文本（“子2”），
);
}
}
color=colorChanged；
如果
svg
和
BottomNavigationBar
，则应该用setState包围