在flutter中使用transform时如何去除空间区域

问题描述 投票:0回答:1

在此代码中,当布尔值为 true 时,我必须使用变换矩阵对角线,此时两侧和顶部都会显示一些空间,因为使用比例 0.90 但如何删除该空间。

 child: Transform(
                alignment: FractionalOffset.center,
                // transform: Matrix4.diagonal3Values(isKeyboardVisible?_scale*0.90:_scale,isKeyboardVisible?_scale*0.90:_scale, 1.0),
                transform: Matrix4.diagonal3Values(
                  isKeyboardVisible || controller.isBottomVisible.value
                      ? _scale * 0.90
                      : _scale,
                  isKeyboardVisible || controller.isBottomVisible.value
                      ? _scale * 0.90
                      : _scale,
                  1.0,
                )..translate(_position.dx * (isKeyboardVisible || controller.isBottomVisible.value ? 0.90 : 1.0),
                  _position.dy * (isKeyboardVisible || controller.isBottomVisible.value ? 0.90 : 1.0),),
              child: Stack(
                  children: [

                       Container(
                        width: MediaQuery.of(context).size.width,
                        height: MediaQuery.of(context).size.height,
                        color: Colors.red,
                      ),


                    Padding(
                      padding: EdgeInsets.symmetric(horizontal: 20),
                      child: AspectRatio(
                        aspectRatio: 5 / 7,
                        child: Padding(
                          padding: const EdgeInsets.only(top: 8.0),
                          child: Container(
                            alignment: isKeyboardVisible || controller.isBottomVisible.value
                                ? Alignment.topCenter // Align to top center when condition is true
                                : Alignment.center,
                            color: Colors.white,

                          ),
                        ),
                      ),
                    ),

                    ...GlobalState.movableAllWidgets,


                  ]
              ),
            ),

在此图像中 bool 为 false,可以,红色容器覆盖全屏,白色容器带有填充。

enter image description here

但是当 bool 值为 true 时,某些空间显示并且容器不上升,该空间容器在该空间中剪切。

enter image description here

flutter dart
1个回答
0
投票

你应该尝试一下,也许这会对你有帮助

child: Transform(
                alignment: FractionalOffset.center,
                // transform: Matrix4.diagonal3Values(isKeyboardVisible?_scale*0.90:_scale,isKeyboardVisible?_scale*0.90:_scale, 1.0),
                transform: Matrix4.diagonal3Values(
                  isKeyboardVisible || controller.isBottomVisible.value
                      ? _scale * 0.90
                      : _scale,
                  isKeyboardVisible || controller.isBottomVisible.value
                      ? _scale * 0.90
                      : _scale,
                  1.0,
                )..translate(_position.dx * (isKeyboardVisible || controller.isBottomVisible.value ? 0.90 : 1.0),
                  _position.dy * (isKeyboardVisible || controller.isBottomVisible.value ? 0.90 : 1.0),),
              child: Stack(
                  children: [

                       Container(
                        width: MediaQuery.of(context).size.width,
                        height: MediaQuery.of(context).size.height,
                        color: Colors.red,
                      ),
Positioned.fill(
child:Padding(
                      padding: EdgeInsets.symmetric(horizontal: 20),
                      child: AspectRatio(
                        aspectRatio: 5 / 7,
                        child: Padding(
                          padding: const EdgeInsets.only(top: 8.0),
                          child: Container(
                            alignment: isKeyboardVisible || controller.isBottomVisible.value
                                ? Alignment.topCenter // Align to top center when condition is true
                                : Alignment.center,
                            color: Colors.white,
  ),
          ),
        ),
      ),
      ...GlobalState.movableAllWidgets,
    ],
  ),
),

希望对你有帮助.. 我已经使用了 Positioned.fill

© www.soinside.com 2019 - 2024. All rights reserved.