Flutter 如何从自定义小部件中获取价值

Posted 2023-02-23

【中文标题】Flutter 如何从自定义小部件中获取价值

【英文标题】：Flutter How to get value from a custom widget

【发布时间】：2021-04-30 19:50:27

【问题描述】：

我有一个可以使用颜色列表更改颜色的容器。我想从主页中获取容器的选定颜色。单击容器时，会出现一个颜色列表，我们可以选择容器的颜色。我想做的是在按下按钮时从该容器中获取颜色值

  Widget build(BuildContext context) 
    return Container(
      height: 80,
      width: 40,
      padding: EdgeInsets.all(5),
      child: InkWell(
        onTap: () 
          showDialog(
            context: context,
            child: Dialog(
                backgroundColor: Colors.white,
                // insetPadding: EdgeInsets.all(100),
                shape: RoundedRectangleBorder(
                    borderRadius: BorderRadius.circular(20)),
                child: Column(
                  children: [
                    Container(
                      color: Colors.red,
                      height: 50,
                      alignment: Alignment(0, 0),
                      child: Text(
                        'Select the Color',
                        style: TextStyle(
                            fontWeight: FontWeight.bold, fontSize: 20),
                      ),
                    ),
                    ListView.builder(
                        shrinkWrap: true,
                        itemCount: colors.length,
                        itemBuilder: (context, index) 
                          return GestureDetector(
                            child: Container(
                              decoration: BoxDecoration(
                                  //border: Border.all(),
                                  ),
                              padding: EdgeInsets.all(5),
                              child: Row(
                                children: <Widget>[
                                  SizedBox(
                                    width: 20,
                                  ),
                                  Container(
                                    decoration: BoxDecoration(
                                        boxShadow: <BoxShadow>[
                                          BoxShadow(blurRadius: 10)
                                        ],
                                        border: Border.all(),
                                        borderRadius:
                                            BorderRadius.circular(100),
                                        color: color[index]),
                                    padding: EdgeInsets.all(5),
                                    //color: color[index],
                                    height: 45,
                                    width: 45,
                                  ),
                                  Padding(
                                    padding: EdgeInsets.all(10),
                                  ),
                                  Text(
                                    colors[index],
                                    style: TextStyle(
                                      fontFamily:
                                          GoogleFonts.inter().fontFamily,
                                      color: color[index],
                                      fontSize: 20.0,
                                      shadows: [
                                        Shadow(
                                            // bottomLeft
                                            offset: Offset(0, 1.5),
                                            blurRadius: 5,
                                            color: Colors.black),
                                      ],
                                    ),
                                  ),
                                ],
                              ),
                            ),
                            onTap: () 
                              Navigator.pop(context);
                              setState(() 
                                selectedColor = color[index];
                                print(index);
                              );
                            ,
                          );
                        )
                  ],
                )),
          );
        ,
        child: Container(
          padding: EdgeInsets.all(10),
          width: 20,
          height: 60,
          decoration: BoxDecoration(
            color: selectedColor,
            borderRadius: BorderRadius.circular(10),
          ),
        ),
      ),
    );
  

【参考方案1】：

您可以在调用 Navigator.pop() 时将值传递给父级。 https://flutter.dev/docs/cookbook/navigation/returning-data

onTap: () 
                          Navigator.pop(context, color[index]);
                          setState(() 
                            selectedColor = color[index];
                            print(index);
                          );
                        ,

在这种情况下，您需要在调用 Navigator 推送方法后等待结果。

final result = await Navigator.push(
...