颤振：边框半径在显示下不起作用常规对话框

Question

为什么这个BorderRadiusUndershowGeneralDialog不起作用？这是我的代码——

import 'package:flutter/material.dart';
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
return SafeArea(
child: Scaffold(
appBar: AppBar(
title: Text(widget.title),
actions: <Widget>[
IconButton(
icon: Icon(Icons.arrow_downward),
splashColor: Colors.red,
onPressed: _showDrawer)
],
),
body: Container(
color: Colors.white,
height: MediaQuery.of(context).size.height,
width: MediaQuery.of(context).size.width,
child: Center(child: Text("This Is Body"))),
),
);
}
_showDrawer() {
return showGeneralDialog(
context: context,
barrierDismissible: true,
transitionDuration: Duration(milliseconds: 600),
barrierLabel: MaterialLocalizations.of(context).dialogLabel,
barrierColor: Colors.black.withOpacity(0.5),
pageBuilder: (context, _, __) {
return SafeArea(
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
Container(
width: MediaQuery.of(context).size.width,
height: MediaQuery.of(context).size.height / 2.5,
padding: EdgeInsets.all(0),
decoration: BoxDecoration(
borderRadius: BorderRadius.only(
bottomLeft:
Radius.circular(50.0), //This Border Radius doesn't Work
),
boxShadow: [
BoxShadow(
color: Colors.black12,
blurRadius: 3.0,
spreadRadius: 3.0),
],
),
child: Material(
child: ListView(
children: <Widget>[
Align(
alignment: Alignment.topRight,
child: IconButton(
icon: Icon(Icons.close),
splashColor: Colors.red,
onPressed: () {
Navigator.pop(context, false);
}),
),
Align(
alignment: Alignment.topCenter,
child: ClipOval(
child: Image.asset(
"assets/images/avator.jpg",
width: MediaQuery.of(context).size.height / 10,
height: MediaQuery.of(context).size.height / 10,
fit: BoxFit.cover,
)),
),
Align(
alignment: Alignment.topCenter,
child: Text(
"Abir Ahsan",
style: TextStyle(
color: Colors.black,
fontWeight: FontWeight.bold,
fontSize: 20),
),
),
Align(
alignment: Alignment.topCenter,
child: Text(
"[e-mail]",
style: TextStyle(
fontStyle: FontStyle.italic,
),
),
),
Padding(
padding: EdgeInsets.all(20.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
"Menu",
style: TextStyle(
fontSize: 15.0, fontWeight: FontWeight.bold),
),
Text(
"Offers",
style: TextStyle(
fontSize: 15.0, fontWeight: FontWeight.bold),
),
Text(
"My Cart",
style: TextStyle(
fontSize: 15.0, fontWeight: FontWeight.bold),
),
Text(
"Last Orders",
style: TextStyle(
fontSize: 15.0, fontWeight: FontWeight.bold),
),
Text(
"Favourite",
style: TextStyle(
fontSize: 15.0, fontWeight: FontWeight.bold),
),
Text(
"My Settings",
style: TextStyle(
fontSize: 15.0, fontWeight: FontWeight.bold),
)
],
),
)
],
),
),
),
],
),
);
},
transitionBuilder: (context, animation, secondaryAnimation, child) {
return SlideTransition(
position: CurvedAnimation(
parent: animation,
curve: Curves.easeOut,
).drive(Tween<Offset>(
begin: Offset(0, -1.0),
end: Offset.zero,
)),
child: child,
);
},
);
}
}

Answer 1

容器 BoxDecoration 在材质组件上绘制，但该页面中树上方没有材质，您使用的第一个材质位于容器下方。也来自文档

形状或边框半径不会剪裁修饰容器的子项。如果需要剪辑，请插入一个剪辑小部件(例如，ClipRect、ClipRRect、ClipPath(作为容器的子项。请注意，削波在性能方面可能代价高昂

例如，如果将颜色应用于 BoxDecoration

BoxDecoration(
color: Colors.green, //For example this color
borderRadius: BorderRadius.only(
bottomLeft:
Radius.circular(50.0), //This Border Radius doesn't Work
),
boxShadow: [
BoxShadow(
color: Colors.black12,
blurRadius: 3.0,
spreadRadius: 3.0
),
],
),

您仍将看到材质的颜色(容器的子项(。在这种情况下，解决它的方法是将该装饰应用于材质

Container(
width: MediaQuery.of(context).size.width,
height: MediaQuery.of(context).size.height / 2.5,
padding: EdgeInsets.zero,
child: Material(
elevation: 8,
shadowColor: Colors.black12,
borderRadius: BorderRadius.only(
bottomLeft:
Radius.circular(50.0), //Use the border raidus property of the Material
),
child: ... //The ListView and everything else
)
)

或者你可以使用容器上方的材料，然后你可以使用它的BoxDecoration，它将具有相同的效果

Material(
type: MaterialType.transparency, //Transparent so you don't see a color below other than the one of the container
child: Container(
width: MediaQuery.of(context).size.width,
height: MediaQuery.of(context).size.height / 2.5,
padding: EdgeInsets.zero,
decoration: BoxDecoration(
color: Colors.green, //This color now applies correctly
borderRadius: BorderRadius.only(
bottomLeft:
Radius.circular(50.0),
),
boxShadow: [
BoxShadow(
color: Colors.black12,
blurRadius: 3.0,
spreadRadius: 3.0),
],
),
child: ... //The ListView and everything else
),
)