如何為容器的大小設定影片，因為其中的內容在Flutter中發生變化？

我想創建一個影片按鈕，當用戶點擊它時，它最初有一個同步圖示，它還將包含一個文本“取消”并且同步圖示開始旋轉。

初始狀態

最終狀態

這是我用于按鈕的小部件。我知道這可以通過在 CSS 中添加過渡屬性來完成，我嘗試在 Flutter 中使用 ScaleTransition，但容器仍然會突然擴展（因為 ScaleTransition 本身占用了開始時的所有大小）。

AnimatedContainer(
          duration: Duration(milliseconds: 3000),
          padding: const EdgeInsets.all(5.0),
          decoration: BoxDecoration(
            color: Colors.white.withOpacity(0.1),
            border: Border.all(
              color: Colors.pink.withOpacity(0.6),
            ),
            borderRadius: BorderRadius.circular(5.0),
          ),
          child: Row(
            mainAxisSize: MainAxisSize.min,
            children: [
              RotationTransition(
                turns: Tween(begin: 0.0, end: 1.0)
                    .animate(_rotationAnimationController),
                child: const Icon(
                  Icons.sync,
                  color: Colors.pink,
                ),
              ),
              ScaleTransition(
                scale: _scaleAnimationController,
                child: (state is NoteSyncOnGoing)
                    ? Row(
                        children: const [
                          SizedBox(width: 5),
                          Text(
                            "Cancel",
                            style: TextStyle(
                              color: Colors.pink,
                              fontWeight: FontWeight.w600,
                            ),
                          ),
                          SizedBox(width: 5),
                        ],
                      )
                    : const SizedBox.shrink(),
              ),
            ],
          ),
        ),

編輯

檢查 ScaleTransition 之前的狀態也不能解決問題，因為當 ScaleTransition 掛載時，ScaleTransition 小部件本身會在縮放影片完成后獲取其子組件獲取的最大空間。

所以它會導致這樣的事情

然后通過縮放影片出現取消文本

uj5u.com熱心網友回復：

AnimatedContainer 沒有給你尺寸影片，你必須使用 AnimatedSize，并移除 ScaleTransition。

AnimatedSize(
      duration: const Duration(milliseconds: 3000),
      child: Container(
        padding: const EdgeInsets.all(5.0),
        decoration: BoxDecoration(
          color: Colors.white.withOpacity(0.1),
          border: Border.all(
            color: Colors.pink.withOpacity(0.6),
          ),
          borderRadius: BorderRadius.circular(5.0),
        ),
        child: Row(
          mainAxisSize: MainAxisSize.min,
          children: [
            RotationTransition(
              turns: Tween(begin: 0.0, end: 1.0)
                  .animate(_rotationAnimationController),
              child: const Icon(
                Icons.sync,
                color: Colors.pink,
              ),
            ),
            (state is NoteSyncOnGoing)
                ? Row(
              children: const [
                SizedBox(width: 5),
                Text(
                  "Cancel",
                  style: TextStyle(
                    color: Colors.pink,
                    fontWeight: FontWeight.w600,
                  ),
                ),
                SizedBox(width: 5),
              ],
            )
                : const SizedBox.shrink(),
          ],
        ),
      ),
    )

uj5u.com熱心網友回復：

而不是檢查縮放轉換內部的狀態，而是在縮放轉換小部件之前檢查它

AnimatedContainer(
          duration: Duration(milliseconds: 3000),
          padding: const EdgeInsets.all(5.0),
          decoration: BoxDecoration(
            color: Colors.white.withOpacity(0.1),
            border: Border.all(
              color: Colors.pink.withOpacity(0.6),
            ),
            borderRadius: BorderRadius.circular(5.0),
          ),
          child: Row(
            mainAxisSize: MainAxisSize.min,
            children: [
              RotationTransition(
                turns: Tween(begin: 0.0, end: 1.0)
                    .animate(_rotationAnimationController),
                child: const Icon(
                  Icons.sync,
                  color: Colors.pink,
                ),
              ),
           (state is NoteSyncOnGoing)?   ScaleTransition(
    scale: _scaleAnimationController,
                child: Row(
                        children: const [
                          SizedBox(width: 5),
                          Text(
                            "Cancel",
                            style: TextStyle(
                              color: Colors.pink,
                              fontWeight: FontWeight.w600,
                            ),
                          ),
                          SizedBox(width: 5),
                        ],
                      )

              ):SizedBox.shrink(),
            ],
          ),
        ),

標籤：扑 动画

上一篇：GitHub標記無法正常作業“此提交不屬于此存盤庫上的任何分支，并且可能屬于存盤庫之外的分支。”

下一篇：影片在for回圈中生成的多個圖形