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

【问题标题】：how, do i change the container widget without rebuilding parent widget in flutter?如何在不重建父小部件的情况下更改容器小部件？
【发布时间】：2022-01-25 03:09:41
【问题描述】：

这是我的FloatingActionButton

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

当我单击按钮时，它将调用具有showModalBottomSheet 的_bottomSheet 函数。

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() 函数来切换图标。但同时我想在不重建父组件的情况下更改容器小部件的子属性。那么，我如何获得此功能。

【问题讨论】：

你想在 Container 中做些什么改变？
在 AnimatedIcon 中显示列表图标，当我单击该列表图标时，它将更改为网格图标，当时我需要容器中的 ButtonsList() 类，然后当按下网格图标时我需要 ButtonGrid() 类。
所以是列表？ ButtonList() : ButtonGrid()，这对你不起作用？
它正在工作，但没有通过单击图标反映。它会在我重新打开 showModalBottomSheet 时反映出来。
为什么不把同样的功能放在按下浮动按钮的时候？

标签： flutter dart flutter-animation

【解决方案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"),
                  ),
                ],
              ),
            ),
          );
        });
  }

您可以找到更多详情here

【讨论】：

您还可以创建另一个小部件来分离上下文