flutter - 在将 Container 包装到 SigleChildScrollView 时，UI 看起来很模糊？
问题描述
我正在构建一个叠加层，并且叠加层内容超过了容器大小，所以我尝试将容器包装在 SingleChildScrollView 中，但是这样做之后，UI 看起来很模糊。容器有一个 Column，我在其中放置 FormFields，对于 Column，mainAxisAlignment 属性设置为 spaceBetween 但小部件也彼此相邻呈现。
将容器添加到 SingleChildScrollView 之前的代码和 UI：
addNewStudent(BuildContext context) {
OverlayState overlayState = Overlay.of(context);
OverlayEntry overlayEntry;
overlayEntry = OverlayEntry(
builder: (context) => Positioned(
width: SizeConfig.blockSizeHorizontal * 30,
height: SizeConfig.blockSizeVertical * 90,
top: SizeConfig.blockSizeVertical * 9,
left: SizeConfig.blockSizeHorizontal * 40,
child: Material(
child: Container(
alignment: Alignment.topLeft,
padding: EdgeInsets.symmetric(
vertical: SizeConfig.blockSizeVertical * 2,
horizontal: SizeConfig.blockSizeHorizontal * 1.5),
decoration: BoxDecoration(
color: Color(0xFFFFFFFF),
border: Border.all(color: Colors.black38, width: 1)),
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(
'ADD NEW STUDENT',
style: GoogleFonts.montserrat(
textStyle: TextStyle(
color: Colors.blue,
fontSize: 22,
fontWeight: FontWeight.w400)),
),
IconButton(
icon: Icon(
Icons.close,
),
onPressed: () {
setState(() {
overlayEntry.remove();
overlayIgnoreState = false;
opacity = 1;
});
//TODO turning the IgnorePointer false here only works for this screen as it is for this container only it
//should be set for the parent continer of which the drawer and appBar are a part of.
})
],
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10),
color: Color(0xFFF3F3F3),
),
width: SizeConfig.blockSizeHorizontal * 12,
child: TextFormField(
decoration: InputDecoration(
enabledBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(10),
borderSide: const BorderSide(
color: Color(0xFFF3F3F3))),
focusedBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(10),
borderSide: const BorderSide(
color: Color(0xFFF3F3F3))),
hintText: 'First Name',
hintStyle: GoogleFonts.montserrat(
textStyle:
TextStyle(color: Colors.black54)))),
),
Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10),
color: Color(0xFFF3F3F3),
),
width: SizeConfig.blockSizeHorizontal * 12,
child: TextFormField(
decoration: InputDecoration(
enabledBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(10),
borderSide: const BorderSide(
color: Color(0xFFF3F3F3))),
focusedBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(10),
borderSide: const BorderSide(
color: Color(0xFFF3F3F3))),
hintText: 'Last Name',
hintStyle: GoogleFonts.montserrat(
textStyle:
TextStyle(color: Colors.black54)))),
)
],
),
Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10),
color: Color(0xFFF3F3F3),
),
child: TextFormField(
decoration: InputDecoration(
enabledBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(10),
borderSide: const BorderSide(
color: Color(0xFFF3F3F3))),
focusedBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(10),
borderSide: const BorderSide(
color: Color(0xFFF3F3F3))),
hintText: 'Father\'s Name',
hintStyle: GoogleFonts.montserrat(
textStyle:
TextStyle(color: Colors.black54)))),
),
Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10),
color: Color(0xFFF3F3F3),
),
child: TextFormField(
decoration: InputDecoration(
enabledBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(10),
borderSide: const BorderSide(
color: Color(0xFFF3F3F3))),
focusedBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(10),
borderSide: const BorderSide(
color: Color(0xFFF3F3F3))),
hintText: 'Email id',
hintStyle: GoogleFonts.montserrat(
textStyle:
TextStyle(color: Colors.black54)))),
),
Container(
decoration: BoxDecoration(
color: Colors.grey[200],
borderRadius: BorderRadius.circular(8),
),
child: Row(
children: [
Container(
height: 50,
alignment: Alignment.center,
padding: const EdgeInsets.symmetric(
horizontal: 8,
),
decoration: BoxDecoration(
color: Colors.blue,
borderRadius: BorderRadius.only(
topLeft: Radius.circular(8),
bottomLeft: Radius.circular(8),
),
),
child: Text(
"+91",
style: TextStyle(
color: Colors.white,
),
),
),
Expanded(
child: Padding(
padding: const EdgeInsets.symmetric(
horizontal: 12,
),
child: TextField(
decoration: InputDecoration(
border: InputBorder.none,
hintText: "Mobile No."),
),
),
)
],
),
),
Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10),
color: Color(0xFFF3F3F3),
),
child: TextFormField(
decoration: InputDecoration(
enabledBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(10),
borderSide: const BorderSide(
color: Color(0xFFF3F3F3))),
focusedBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(10),
borderSide: const BorderSide(
color: Color(0xFFF3F3F3))),
hintText: 'Date of Birth',
hintStyle: GoogleFonts.montserrat(
textStyle:
TextStyle(color: Colors.black54)))),
),
Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10),
color: Color(0xFFF3F3F3),
),
child: TextFormField(
decoration: InputDecoration(
enabledBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(10),
borderSide: const BorderSide(
color: Color(0xFFF3F3F3))),
focusedBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(10),
borderSide: const BorderSide(
color: Color(0xFFF3F3F3))),
hintText: 'School Name',
hintStyle: GoogleFonts.montserrat(
textStyle:
TextStyle(color: Colors.black54)))),
),
Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10),
color: Color(0xFFF3F3F3),
),
child: TextFormField(
keyboardType: TextInputType.multiline,
maxLines: 3,
decoration: InputDecoration(
enabledBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(10),
borderSide: const BorderSide(
color: Color(0xFFF3F3F3))),
focusedBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(10),
borderSide: const BorderSide(
color: Color(0xFFF3F3F3))),
hintText: 'Address',
hintStyle: GoogleFonts.montserrat(
textStyle:
TextStyle(color: Colors.black54)))),
),
Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10),
color: Color(0xFFF3F3F3),
),
child: TextFormField(
decoration: InputDecoration(
enabledBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(10),
borderSide: const BorderSide(
color: Color(0xFFF3F3F3))),
focusedBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(10),
borderSide: const BorderSide(
color: Color(0xFFF3F3F3))),
hintText: 'Assign Batch',
hintStyle: GoogleFonts.montserrat(
textStyle:
TextStyle(color: Colors.black54)))),
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text('Gender', style: montserratTextStyle(16, Colors.black54)),
Radio(
value: 1,
groupValue: null,
onChanged: null,
),
Text('Male', style: montserratTextStyle(15, Colors.black54)),
Radio(
value: 2,
groupValue: null,
onChanged: null,
),
Text('Female', style: montserratTextStyle(15, Colors.black54)),
Radio(
value: 3,
groupValue: null,
onChanged: null,
),
Text('Other', style: montserratTextStyle(15, Colors.black54)),
],
),
Container(
decoration: BoxDecoration(
color: Colors.grey[200],
borderRadius: BorderRadius.circular(8),
),
child: Row(
children: [
Container(
height: 50,
alignment: Alignment.center,
padding: const EdgeInsets.symmetric(
horizontal: 8,
),
decoration: BoxDecoration(
color: Colors.blue,
borderRadius: BorderRadius.only(
topLeft: Radius.circular(8),
bottomLeft: Radius.circular(8),
),
),
child: Text(
'Fee Payment Type',
style: TextStyle(
color: Colors.white,
),
),
),
Expanded(
child: Padding(
padding: const EdgeInsets.symmetric(
horizontal: 12,
),
child: TextField(
decoration: InputDecoration(
border: InputBorder.none,
hintText: 'Monthly'),
),
),
)
],
),
),
RaisedButton(
padding: EdgeInsets.symmetric(
vertical: SizeConfig.blockSizeVertical * 1,
horizontal: SizeConfig.blockSizeHorizontal * 3),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10)),
elevation: 0,
color: Colors.blue,
onPressed: () {
//function to add new Student to database
},
child: Text('SAVE',
style: GoogleFonts.montserrat(
textStyle: TextStyle(
color: Colors.white,
fontSize: 16,
))),
)
],
)),
)));
overlayState.insert(overlayEntry);
}
添加 SingleChildScrollView 之前的 UI： 之前的 UI
添加 SingleChildScrollView 后的 UI： 后的 UI
