行中有两个用Expanded包装的容器,但当使用SingleChildScrollView Over Row时,容器的高度将减少到它的子级.
如果没有SingleChildScrollView,输出将如下所示,但不能滚动.
Widget build(BuildContext context) {
final screenWidth = MediaQuery.sizeOf(context).width;
final screenHeight = MediaQuery.sizeOf(context).height;
return Scaffold(
body: SafeArea(
child: Center(
child: Container(
color: Colors.blue,
// height: screenHeight,
child: Row(
children: [
Expanded(
child: Container(
color: mainLightColor,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Image(
width: MediaQuery.sizeOf(context).width * 0.22,
height: MediaQuery.sizeOf(context).width * 0.22,
fit: BoxFit.contain,
image: const AssetImage('assets/images/logo.png')),
],
),
),
),
Expanded(
child: Container(
color: blackColor,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Container(
width: screenWidth * 0.2,
height: 35,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(45),
color: mainMediumColor,
),
child: Center(
child: Text(
'Create Account',
style: GoogleFonts.poppins(),
),
),
),
const SizedBox(
height: 20,
),
Container(
width: screenWidth * 0.2,
height: 35,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(45),
border: Border.all(color: mainMediumColor),
color: blackColor,
),
child: Center(
child: Text(
'Log In',
style: GoogleFonts.poppins(color: whiteColor),
),
),
),
],
),
),
),
],
),
),
)));
}
}
在不使用SingleChildScrollView的情况下,输出如下
使用SingleChildScrollView,输出如下所示
Widget build(BuildContext context) {
final screenWidth = MediaQuery.sizeOf(context).width;
final screenHeight = MediaQuery.sizeOf(context).height;
return Scaffold(
body: SafeArea(
child: Center(
child: SingleChildScrollView(
child: Container(
color: Colors.blue,
// height: screenHeight,
child: Row(
children: [
Expanded(
child: Container(
color: mainLightColor,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Image(
width: MediaQuery.sizeOf(context).width * 0.22,
height: MediaQuery.sizeOf(context).width * 0.22,
fit: BoxFit.contain,
image: const AssetImage('assets/images/logo.png')),
],
),
),
),
Expanded(
child: Container(
color: blackColor,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Container(
width: screenWidth * 0.2,
height: 35,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(45),
color: mainMediumColor,
),
child: Center(
child: Text(
'Create Account',
style: GoogleFonts.poppins(),
),
),
),
const SizedBox(
height: 20,
),
Container(
width: screenWidth * 0.2,
height: 35,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(45),
border: Border.all(color: mainMediumColor),
color: blackColor,
),
child: Center(
child: Text(
'Log In',
style: GoogleFonts.poppins(color: whiteColor),
),
),
),
],
),
),
),
],
),
),
),
)));
}
}
我想要滚动的容器的完全高度,但SingleChildScrollView根据子元素的高度降低它.
我为容器提供了ScreenHeight,但它不起作用.
有什么解决办法吗?谢谢