flutter - 有没有办法改变对话框的形状?
问题描述
我正在查看不同对话框类的属性,但没有看到任何会改变其形状的东西。有没有办法改变对话框的形状?
解决方案
Container
您可以结合现有的剪辑小部件(绘画和效果小部件)或通过扩展来创建各种形状的对话框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;
}
推荐阅读
- php - 发生数据库错误 | PHP股票数据库
- javascript - FullCalendar JS 如何保存数据
- reactjs - 反应 onClick 属性未触发
- postgresql - 如何将 Oracle 查询转换为 Postgresql 示例一些转换函数不起作用 Postgress
- java - Java Android Show with a recyclerview the strings of an array with a external layout
- c# - MSAL.NET 中的令牌缓存序列化不起作用
- visual-studio-code - 如何在声明后使 Prettier STOP DELETE “空格线”?
- javascript - 其他带有 toUpperCase()、toLowerCase() 和 Number.isInteger() 的 if 语句
- c# - Autofac 工作单元中的依赖注入
- amazon-web-services - AWS CodeBuild with Multi Docker Containers:无法准备上下文:无法评估 Dockerfile 路径中的符号链接