在flutter 最新版本基础上,设计一个下边为波浪形的appbar
时间: 2024-02-24 16:59:36 浏览: 113
创建一个漂亮的flutter app
好的,下面是一个在Flutter最新版本基础上设计下边为波浪形的AppBar的示例代码。
```dart
import 'package:flutter/material.dart';
class WaveAppBar extends StatelessWidget implements PreferredSizeWidget {
final String title;
const WaveAppBar({Key key, this.title}) : super(key: key);
@override
Widget build(BuildContext context) {
return AppBar(
title: Text(title),
elevation: 0.0,
backgroundColor: Colors.blue,
shape: const WaveShapeBorder(),
);
}
@override
Size get preferredSize => const Size.fromHeight(kToolbarHeight + 50.0);
}
class WaveShapeBorder extends ContinuousRectangleBorder {
const WaveShapeBorder();
@override
Path getOuterPath(Rect rect, {TextDirection textDirection}) {
final double waveHeight = 20.0;
final double height = rect.height;
final double width = rect.width;
final Path path = Path()
..moveTo(0.0, height)
..lineTo(0.0, waveHeight)
..quadraticBezierTo(width / 4, -waveHeight * 1.5, width / 2, 0.0)
..quadraticBezierTo(width * 3 / 4, waveHeight * 1.5, width, 0.0)
..lineTo(width, height);
return path;
}
}
```
在这个示例中,我们先定义了一个`WaveAppBar`,继承自`StatelessWidget`和`PreferredSizeWidget`,用于创建波浪形的AppBar。在`WaveAppBar`的`build`方法中,我们创建了一个标准的AppBar,并将其`backgroundColor`设置为蓝色。然后,我们将`AppBar`的`shape`属性设置为自定义的`WaveShapeBorder`。
`WaveShapeBorder`继承自`ContinuousRectangleBorder`,用于绘制波浪形。在这个类中,我们首先定义了一些常量,如波浪的高度和矩形的高度、宽度等。然后,我们使用`Path`类创建一个波浪形状,并返回该波浪形状的`Path`。
最后,在`WaveAppBar`中,我们重写了`PreferredSizeWidget`的`preferredSize`方法,以确保AppBar的高度正确计算。这里,我们将AppBar的高度设置为`kToolbarHeight + 50.0`。
你可以在自己的Flutter应用程序中使用这个示例代码来创建下边为波浪形的AppBar。
阅读全文