如何在 Flutter 中制作弧形底部 appBar？答案

【问题标题】：How to make curved bottom appBar in Flutter?如何在 Flutter 中制作弧形底部 appBar？
【发布时间】：2020-10-23 16:17:33
【问题描述】：

如何在我的应用程序中为appBar 绘制自定义形状，使其看起来像图像？

【问题讨论】：

标签： flutter curve clip appbar

【解决方案1】：

我认为这不是appBar 的形状。

我认为是绿色appBar 下方的白色容器具有圆角。

示例如下：

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.lightBlueAccent,
      body: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          Container(
            padding: EdgeInsets.only(
                top: 60.0, left: 30.0, right: 30.0, bottom: 30.0),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: <Widget>[
                Text(
                  'Hello',
                  style: TextStyle(
                    color: Colors.white,
                    fontSize: 50.0,
                    fontWeight: FontWeight.w700,
                  ),
                ),
              ],
            ),
          ),
          Expanded(
            child: Container(
              padding: EdgeInsets.symmetric(horizontal: 20.0),
              decoration: BoxDecoration(
                color: Colors.white,
                borderRadius: BorderRadius.only(
                  topLeft: Radius.circular(20.0),
                  topRight: Radius.circular(20.0),
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }
}

【讨论】：

是的，我试过了，但我需要 appbar 像滚动时的图像一样，appbar 不会更改为默认值
有没有办法让appbar的形状像图片

【解决方案2】：

我使用 CustomScrollView 和 SliverPersistenHeader 构建了类似的东西，以使您的标题可以具有 maxExtent 和 minExtent 的弯曲效果。不滚动时，标题高度将显示曲线，否则当您开始滚动时，它也会缩小到设定的高度。

您可以在 2:50 左右查看此tutorial，了解如何实现标头，然后相应地设计您的后台容器。

【讨论】：

【解决方案3】：

如上回答。它不是程序栏的一部分。这是我的做法。

这样创建一个类：

import 'dart:ui';

import 'package:flutter/material.dart';

class AppBarPainter extends CustomPainter {

@override
void paint(Canvas canvas, Size size) {
    Paint paint_1 = Paint()
      ..color = const Color(0xffF57752)
      ..style = PaintingStyle.fill;

    Path path_1 = Path()
      ..moveTo(0, 0)
      ..lineTo(size.width * .08, 0.0)
      ..cubicTo(
          size.width * 0.04, 0.0, //x1,y1
          0.0, 0.04, //x2,y2
          0.0, 0.1 * size.width //x3,y3
          );

    Path path_2 = Path()
      ..moveTo(size.width, 0)
      ..lineTo(size.width * .92, 0.0)
      ..cubicTo(
          size.width * .96, 0.0, //x1,y1
          size.width, 0.96, //x2,y2
          size.width, 0.1 * size.width //x3,y3
          );

    Paint paint_2 = Paint()
      ..color = const Color(0xffF57752)
      ..strokeWidth = 1
      ..style = PaintingStyle.stroke;

    Path path_3 = Path()
      ..moveTo(0, 0)
      ..lineTo(size.width, 0);

    canvas.drawPath(path_1, paint_1);
    canvas.drawPath(path_2, paint_1);
    canvas.drawPath(path_3, paint_2);
  }

然后通过将它堆叠在 body 小部件上来在屏幕中使用它。

@override
Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        toolbarHeight: 80.0,
        backgroundColor: const Color(0xffF57752),
        elevation: 0.0,
        title: const Text('Title'),
      ),
      body: Stack(
        children: [
          Container(
            color: Colors.white,
            child: Text('     text here'),
          ),
          CustomPaint(
            painter: AppBarPainter(),
            child: Container(height: 0),
          ),
        ],
      ),
    );
  }

【讨论】：