我有一个顶部左边框为圆形的容器,在它的子项中,我有一列带有 SingleChildScrollView 的列,其中包含每个全名、移动设备等的小部件。 当我向上滚动时,这些孩子会越过容器并溢出圆形边框。 我想解决这个问题。 我希望它在容器后面而不是在它前面。
class SetupAccountScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
return BaseWidget(
mainTitle: "Setup Account",
description:
"One last step to an awesome shopping experience, we’d like to know you more",
content: SingleChildScrollView(
child: Column(
children: [
SizedBox(
height: 50,
),
FullNameInputWidget(),
MobileNumberInputWidget(),
AddressInputWidget(),
],
),
),
);
}
}
class BaseWidget extends StatelessWidget {
final String mainTitle;
final String description;
final Widget content;
BaseWidget({this.mainTitle, this.description, this.content});
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.black,
appBar: AppBar(
title: Text(
"Back",
style: GoogleFonts.playfairDisplay(fontSize: 15),
),
leading: IconButton(
icon: Icon(
Icons.chevron_left,
size: 40,
),
onPressed: () {}),
backgroundColor: Colors.transparent,
),
body: Stack(
children: [
Positioned(
bottom: 0,
child: Container(
height: MediaQuery.of(context).size.height * 0.7,
width: MediaQuery.of(context).size.width,
decoration: BoxDecoration(
color: Colors.white,
borderRadius:
BorderRadius.only(topLeft: Radius.circular(100))),
child: content),
),
Positioned.fill(
child: Align(
alignment: Alignment.topCenter,
child: Padding(
padding: const EdgeInsets.symmetric(
horizontal: 30.0, vertical: 20),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(mainTitle,
style: GoogleFonts.playfairDisplay(
color: Colors.white,
fontWeight: FontWeight.w400,
fontSize: 25)),
Padding(
padding: const EdgeInsets.all(10.0),
child: Text(description,
style: GoogleFonts.playfairDisplay(
color: Colors.white,
fontWeight: FontWeight.w700,
fontSize: 15)),
),
],
),
)))
],
),
);
}
}
答案 0 :(得分:1)
代替容器的 decoration
,使用 ClipRRect
制作圆角,就像这样。
Positioned(
bottom: 0,
child: ClipRRect(
borderRadius: BorderRadius.only(topLeft: Radius.circular(100)),
child: Container(
height: MediaQuery.of(context).size.height * 0.7,
width: MediaQuery.of(context).size.width,
color: Colors.white,
child: content,
),
),
),