如何在不重建父小部件的情况下更改容器小部件？

Question

这是我的FloatingActionButton

floatingActionButton: FloatingActionButton(
        onPressed: () {
          _bottomSheet(context);
        },
        child: const Icon(Icons.add),
      ),

当我点击按钮时，它会调用 _bottomSheet 函数，其中有 showModalBottomSheet.

void _bottomSheet(BuildContext context) {
    showModalBottomSheet(
        context: context,
        elevation: 2,
        shape: const RoundedRectangleBorder(
            borderRadius: BorderRadius.vertical(top: Radius.circular(20))),
        isScrollControlled: true,
        builder: (BuildContext buildcontext) {
          return Container(
            margin: EdgeInsets.only(top: 10),
            padding: EdgeInsets.all(15),
            child: Column(
              mainAxisSize: MainAxisSize.min,
              children: [
                const TextField(
                  decoration: InputDecoration(
                    icon: Icon(LineAwesomeIcons.search),
                    border: OutlineInputBorder(),
                    labelText: 'Filter',
                  ),
                ),
                Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    Text('Add Things'),
                    IconButton(
                      icon: AnimatedIcon(
                          icon: AnimatedIcons.list_view, progress: controller),
                      onPressed: toggleIcon,
                    )
                  ],
                ),
                Container(
                  width: double.maxFinite,
                  height: MediaQuery.of(context).size.height * 0.75,
                  child: isList ? ButtonList() : ButtonGrid(),
                ),
              ],
            ),
          );
        });
  }

控制器和切换图标

 //controller
 late AnimationController controller;
  bool isList = false;

  @override
  void initState() {
    super.initState();
    controller = AnimationController(
      vsync: this,
      duration: Duration(milliseconds: 200),
    );
  }

  @override
  void dispose() {
    controller.dispose();
    super.dispose();
  }

//toggleicon
void toggleIcon() => setState(() {
    isList = !isList;
    isList ? controller.forward() : controller.reverse();
  });

当我点击 AnimatedIcon 时，它通过调用上面的 toggleIcon() 函数来切换图标。但同时我想在不重建父组件的情况下更改容器小部件的子属性。那么，我如何获得此功能。

Answer 1

您需要使用StatefulBuilder来更新showModalBottomSheet()

里面的UI


  void _bottomSheet(BuildContext context) {
    showModalBottomSheet(
        context: context,
        elevation: 2,
        shape: const RoundedRectangleBorder(
            borderRadius: BorderRadius.vertical(top: Radius.circular(20))),
        isScrollControlled: true,
        builder: (BuildContext buildcontext) {
          return StatefulBuilder(
            builder: (context, setStateSB) => Container(
              margin: EdgeInsets.only(top: 10),
              padding: EdgeInsets.all(15),
              child: Column(
                mainAxisSize: MainAxisSize.min,
                children: [
                  const TextField(
                    decoration: InputDecoration(
                      // icon: Icon(LineAwesomeIcons.search),

                      border: OutlineInputBorder(),
                      labelText: 'Filter',
                    ),
                  ),
                  Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: [
                      Text('Add Things'),
                      IconButton(
                        icon: AnimatedIcon(
                            icon: AnimatedIcons.list_view,
                            progress: controller),
                        onPressed: () {
                          toggleIcon();
                          setStateSB(() {}); // this is setstate for inside dialog
                        },
                      )
                    ],
                  ),
                  Container(
                    width: double.maxFinite,
                    height: MediaQuery.of(context).size.height * 0.75,
                    child: isList ? Text("List") : Text("Grid"),
                  ),
                ],
              ),
            ),
          );
        });
  }

您可以找到更多详细信息

如何在不重建父小部件的情况下更改容器小部件？

how, do i change the container widget without rebuilding parent widget in flutter?

dart

flutter

flutter-animation