我如何更改容器小部件而不在顫振中重建父小部件？

這是我的 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()函式單擊它的切換圖示時。但同時我想在不重建父組件的情況下更改容器小部件的子屬性。那么，我如何獲得此功能。

uj5u.com熱心網友回復：

你需要用來StatefulBuilder更新里面的UIshowModalBottomSheet()

  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"),
                  ),
                ],
              ),
            ),
          );
        });
  }

您可以在此處找到更多詳細資訊

標籤：扑 镖 颤动动画

上一篇： 不是為型別“物件”定義的

下一篇：為什么Flutter構建沒有聲音零安全性