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

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

问题描述

我正在 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
    进行响应式缩放,但问题仍然存在。

android flutter mobile
1个回答
0
投票

你可以尝试

Expanded
,或
GridView.builder
这样使用

GridView.builder(
                          physics: const NeverScrollableScrollPhysics(),
                          primary: true,
                          shrinkWrap: false,
                          gridDelegate:
                          const SliverGridDelegateWithFixedCrossAxisCount(
                        crossAxisCount: 1),
                        )
© www.soinside.com 2019 - 2024. All rights reserved.