Flutter 动画容器更改 child 小部件的大小

Question

我正在尝试创建一个容器，我可以在其中执行两个手势：onTapDown 和 onTapUp。我想在执行 onTapDown.

时减小容器的尺寸

我想要的是这样的： https://i.imgur.com/7hW2Cn1.gifv

问题是，如果我使用 AnimatedController，我还需要调整 children 的大小，这是一团糟。

我也查看了 flutter_bounce 库，但我想要的不是基于持续时间的东西。如果用户一直按下，容器将保持按下状态。

class CustomContainerState extends State<CustomContainer> {

  double width = 90.w;
  double height = 35.h;

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      child: Center( 
        child: AnimatedContainer(
          duration: Duration(milliseconds: 200),
          margin: EdgeInsets.only(left: 5.w, right: 5.w),
          width: width,
          height: height,
          child: Column(
              children: [
                Container(
                  width: 90.w,
                  height: 25.h,
                  decoration: BoxDecoration(
                    color: green400,
                    borderRadius: BorderRadius.only(topLeft: Radius.circular(5.w), topRight: Radius.circular(5.w)),
                  ),
                ),
                Container(
                  margin: EdgeInsets.only(left: 5.w, right: 5.w, top: 1.h, bottom: 1.h),
                  width: 90.w,
                  height: 8.h,
                  decoration: BoxDecoration(
                    borderRadius: BorderRadius.only(bottomLeft: Radius.circular(5.w), bottomRight: Radius.circular(5.w)),
                  ),
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    mainAxisAlignment: MainAxisAlignment.spaceAround,
                    children: [
                      Text(
                        "Ratings",
                        style: TextStyle(
                          fontFamily: "SanFrancisco",
                          fontSize: 10.sp,
                          fontWeight: FontWeight.w400,
                          overflow: TextOverflow.ellipsis,
                        ),
                      ),
                      Text(
                        "Title",
                        style: TextStyle(
                          fontFamily: "SanFrancisco",
                          fontSize: 12.sp,
                          fontWeight: FontWeight.w600,
                          overflow: TextOverflow.ellipsis,
                        ),
                      ),
                      Text(
                        "Description",
                        style: TextStyle(
                          fontFamily: "SanFrancisco",
                          fontSize: 10.sp,
                          fontWeight: FontWeight.w400,
                          overflow: TextOverflow.ellipsis,
                        ),
                      ),
                    ],
                  ),
                ),
              ],
          ),
        ),
        
           
      ),

      onTapDown: (tapDownDetails) {
        setState(() {
          width = 85.w;
          height = 30.h;
        });
      },
      onTapUp: (TapUpDetails) {
        setState(() {
          width = 90.w;
          height = 35.h;
        });
      },
    );
  }
}

问题是如何只减少自动减少的 parent 容器以及 children？因为我也可以为 children 使用多个 AnimatedContainer 但问题是文本没有动画。

Answer 1

您是否尝试过使用 scale 而不是更改宽度和高度？像这样：

class CustomContainerState extends State<CustomContainer> {
  double width = 90;
  double height = 350;
  double scale = 1;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: GestureDetector(
          child: Center(
            child: AnimatedContainer(
              transform: Matrix4.identity()..scale(scale),
              color: Colors.green,
              duration: Duration(milliseconds: 200),
              margin: EdgeInsets.only(left: 5, right: 5),
              width: width,
              height: height,
              child: Column(
                children: [
                  Container(
                    width: 90,
                    height: 25,
                    decoration: BoxDecoration(
                      // color: green400,
                      borderRadius: BorderRadius.only(
                          topLeft: Radius.circular(5),
                          topRight: Radius.circular(5)),
                    ),
                  ),
                  Container(
                    margin: EdgeInsets.only(
                        left: 5, right: 5, top: 1, bottom: 1),
                    width: 90,
                    height: 80,
                    decoration: BoxDecoration(
                      borderRadius: BorderRadius.only(
                          bottomLeft: Radius.circular(5),
                          bottomRight: Radius.circular(5)),
                    ),
                    child: Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      mainAxisAlignment: MainAxisAlignment.spaceAround,
                      children: [
                        Text(
                          "Ratings",
                          style: TextStyle(
                            fontFamily: "SanFrancisco",
                            fontSize: 10,
                            fontWeight: FontWeight.w400,
                            overflow: TextOverflow.ellipsis,
                          ),
                        ),
                        Text(
                          "Title",
                          style: TextStyle(
                            fontFamily: "SanFrancisco",
                            fontSize: 12,
                            fontWeight: FontWeight.w600,
                            overflow: TextOverflow.ellipsis,
                          ),
                        ),
                        Text(
                          "Description",
                          style: TextStyle(
                            fontFamily: "SanFrancisco",
                            fontSize: 10,
                            fontWeight: FontWeight.w400,
                            overflow: TextOverflow.ellipsis,
                          ),
                        ),
                      ],
                    ),
                  ),
                ],
              ),
            ),
          ),
          onTapDown: (tapDownDetails) {
            setState(() {
              // width = 85;
              // height = 300;
              scale = .8;
            });
          },
          onTapUp: (TapUpDetails) {
            setState(() {
              // width = 90;
              // height = 350;
              scale = 1;
            });
          },
        ),
      ),
    );
  }
}

Flutter 动画容器更改 child 小部件的大小

Flutter animated container change size of child widget

flutter

dart

widget

containers

animatedcontainer