如何确保右侧内容保持比例o

Question

问题描述

我正在 Flutter 中构建一个响应式身份验证页面，该页面可以在横向模式下工作而无需滚动。左侧部分显示图像，右侧部分包含表单和按钮。挑战是在不启用滚动的情况下确保响应能力，尤其是右侧内容。

class AuthPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    SystemChrome.setPreferredOrientations([
      DeviceOrientation.landscapeRight,
      DeviceOrientation.landscapeLeft,
    ]);

    double screenHeight = MediaQuery.of(context).size.height;
    double screenWidth = MediaQuery.of(context).size.width;

    return Scaffold(
      backgroundColor: Colors.transparent,
      body: Row(
        children: [
          // Left-side image
          Flexible(
            flex: 3,
            child: CardsImage(screenHeight: screenHeight),
          ),
          // Right-side form
          Flexible(
            flex: 3,
            child: Padding(
              padding: EdgeInsets.symmetric(
                horizontal: screenWidth * 0.03,
                vertical: screenHeight * 0.02,
              ),
              child: Column(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  // Repeated BlocBuilder handling AuthState logic
                  // Form fields and buttons
                ],
              ),
            ),
          ),
        ],
      ),
    );
  }
}

我尝试过的事情

1. 两个部分均使用

   Flexible

   。

2. 计算填充和边距作为屏幕尺寸的百分比。

3. 尝试使用

   ScreenUtil

   进行响应式缩放，但问题仍然存在。

Answer 1

你可以尝试

Expanded

，或

GridView.builder

这样使用

GridView.builder(
                          physics: const NeverScrollableScrollPhysics(),
                          primary: true,
                          shrinkWrap: false,
                          gridDelegate:
                          const SliverGridDelegateWithFixedCrossAxisCount(
                        crossAxisCount: 1),
                        )