我正在 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
],
),
),
),
],
),
);
}
}
两个部分均使用
Flexible
。
计算填充和边距作为屏幕尺寸的百分比。
尝试使用
ScreenUtil
进行响应式缩放,但问题仍然存在。
你可以尝试
Expanded
,或GridView.builder
这样使用
GridView.builder(
physics: const NeverScrollableScrollPhysics(),
primary: true,
shrinkWrap: false,
gridDelegate:
const SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 1),
)