flutter - 如何修复小部件溢出圆形边框容器颤动
问题描述
我有一个 topLeft 边框为圆形的容器,在它的子项中,我有一个带有 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)),
),
],
),
)))
],
),
);
}
}
解决方案
而不是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,
),
),
),
推荐阅读
- python-3.x - 在 pandas 数据框中的行之间添加随机数据
- sql - 如何在 SQL 中编写查询当前年度成本和上一年成本?
- jenkins - 清空 etc/default/jenkins 文件。如何更改詹金斯端口?
- css - 如何使字体全高
- sql - 如何根据 SQL Server 中的值存在来设置值?
- javascript - 如何为 html 页面实现主题/模板加载
- indexing - 什么是索引?为什么我们不对所有事情都使用散列?
- node.js - 如何在警卫(ResourceOwnerGuard)之前执行管道(ValidateObjectId)?
- sql - How to perform group function over an outer join query?
- object - 如何将 ramda 食谱中的 flattenObj 函数转换为迭代函数