Flutter 有没有办法改变对话框的形状?
我正在查看不同对话框类的属性,没有看到任何会改变其形状的内容。有没有办法更改对话框的形状?您可以使用Flutter 有没有办法改变对话框的形状?,flutter,Flutter,我正在查看不同对话框类的属性,没有看到任何会改变其形状的内容。有没有办法更改对话框的形状?您可以使用容器结合现有的剪辑小部件()或扩展CustomClipper来创建各种形状的对话框。下面将为您提供一个菱形对话框。有一些现有的小部件,如ClipOval,可以在没有任何定制的情况下开箱即用(参见下面的屏幕截图)。如果您想试用ClipOval,只需将ClipPath替换为ClipOval,并注释掉clipper:。查看painting.dart类,了解如何创建自定义路径 import 'packag
容器
结合现有的剪辑小部件()或扩展CustomClipper
来创建各种形状的对话框。下面将为您提供一个菱形对话框。有一些现有的小部件,如ClipOval
,可以在没有任何定制的情况下开箱即用(参见下面的屏幕截图)。如果您想试用ClipOval
,只需将ClipPath
替换为ClipOval
,并注释掉clipper:
。查看painting.dart
类,了解如何创建自定义路径
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Shaped Dialog Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
dialogBackgroundColor: Colors.transparent,
),
home: MyHomePage(title: 'Flutter Shaped Dialog Demo'),
);
}
}
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 Scaffold(
floatingActionButton: FloatingActionButton(
child: Icon(Icons.add),
onPressed: () {
_showShapedDialog();
}),
);
}
_showShapedDialog() {
showDialog(
context: context,
builder: (context) {
return Padding(
padding: const EdgeInsets.fromLTRB(24.0, 20.0, 24.0, 24.0),
child: ClipPath(
child: Material(
color: Colors.white,
child: Center(
child: Container(
alignment: FractionalOffset.center,
height: MediaQuery.of(context).size.width / 2.0,
width: MediaQuery.of(context).size.width / 2.0,
decoration: BoxDecoration(
border: Border.all(),
),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Padding(
padding: const EdgeInsets.only(bottom: 20.0),
child: Text(
'Clipping to a path is expensive. Certain shapes have more optimized widgets.',
textAlign: TextAlign.center,
),
),
FlatButton(
child: Text(
'OK',
style: TextStyle(color: Colors.blue),
),
onPressed: () {
Navigator.pop(context);
},
),
],
),
),
),
),
clipper: _MyClipper(), // Comment this out if you want to replace ClipPath with ClipOval
),
);
},
);
}
}
class _MyClipper extends CustomClipper<Path> {
@override
Path getClip(Size size) {
final path = Path();
path.lineTo(size.width / 2.0, 0.0);
path.lineTo(0.0, size.height / 2.0);
path.lineTo(size.width / 2.0, size.height);
path.lineTo(size.width, size.height / 2.0);
path.lineTo(size.width / 2.0, 0.0);
path.close();
return path;
}
@override
bool shouldReclip(CustomClipper<Path> oldClipper) => false;
}
导入“包装:颤振/材料.省道”;
void main()=>runApp(MyApp());
类MyApp扩展了无状态小部件{
@凌驾
小部件构建(构建上下文){
返回材料PP(
标题:“颤振形对话框演示”,
主题:主题数据(
主样本:颜色。蓝色,
dialogBackgroundColor:Colors.transparent,
),
主页:MyHomePage(标题:“颤振形对话框演示”),
);
}
}
类MyHomePage扩展StatefulWidget{
MyHomePage({Key,this.title}):超级(Key:Key);
最后的字符串标题;
@凌驾
_MyHomePageState createState()=>\u MyHomePageState();
}
类_MyHomePageState扩展状态{
@凌驾
小部件构建(构建上下文){
返回脚手架(
浮动操作按钮:浮动操作按钮(
子:图标(Icons.add),
已按下:(){
_showShapedDialog();
}),
);
}
_showShapedDialog(){
显示对话框(
上下文:上下文,
生成器:(上下文){
返回填充(
填充:LTRB(24.0,20.0,24.0,24.0,24.0)中的常量边集,
孩子:克利帕斯(
儿童:材料(
颜色:颜色,白色,
儿童:中心(
子:容器(
对齐:分馏loffset.center,
高度:MediaQuery.of(context).size.width/2.0,
宽度:MediaQuery.of(context).size.width/2.0,
装饰:盒子装饰(
border:border.all(),
),
子:列(
mainAxisAlignment:mainAxisAlignment.center,
儿童:[
填充物(
填充:仅限常量边集(底部:20.0),
子:文本(
“剪切到路径的成本很高。某些形状具有更优化的小部件。”,
textAlign:textAlign.center,
),
),
扁平按钮(
子:文本(
“好的”,
样式:TextStyle(颜色:Colors.blue),
),
已按下:(){
Navigator.pop(上下文);
},
),
],
),
),
),
),
clipper:_MyClipper(),//如果要用ClipOval替换ClipPath,请将其注释掉
),
);
},
);
}
}
类MyClipper扩展了CustomClipper{
@凌驾
路径getClip(大小){
最终路径=路径();
path.lineTo(size.width/2.0,0.0);
path.lineTo(0.0,size.height/2.0);
path.lineTo(size.width/2.0,size.height);
path.lineTo(size.width、size.height/2.0);
path.lineTo(size.width/2.0,0.0);
path.close();
返回路径;
}
@凌驾
bool shouldReclip(CustomClipper oldClipper)=>false;
}
像那样
Dialog(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(8.0),
),
child: Text('Dialog'),
);
做你自己的。这些都是按照材质设计制作的。谢谢,我只是不知道Dialog类是如何工作的,直到现在它只是一个带有边框半径的花式容器:)而这段代码可能会回答这个问题,提供关于为什么和/或这段代码如何回答这个问题的额外上下文可以提高它的长期价值。
AlertDialog(
shape: RoundedRectangleBorder(borderRadius:
BorderRadius.all(Radius.circular(15))),
title: Text('Your title!'),
content: Container(),
);