代码之家 › 专栏 › 技术社区 › Tanjit Shakil

在Flatter中,我想在应用程序条曲线开始之前归档,如下图所示

dart flutter

Tanjit Shakil · 技术社区 · 3 年前

This is the first screen I designed, curved appbar using clip-path, whine I scroll my content disappeared before curve started, 2n screen showing

in 2n screen when I scroll it app content disappeared before the curve started, I want to achieve disappeared app content where the clip-path curve started

-------------------------------------------------

颤振信息:

颤振(通道稳定,2.10.4,在Microsoft Windows[Version]上) 10.0.19044.1586],地点(美国) -颤振版本2.10.4,位于C:\flatter Dev\flatter –上游存储库 https://github.com/flutter/flutter.git 框架修订版c860cba910(两周前),2022-03-25 00:23:12-0500 -发动机版本57d3bac3dd -Dart版本2.16.2 –DevTools版本2.9.2

0 回复 | 直到 3 年前

Tuan 3 年前

由于您没有提供代码,我无法指出问题所在。我用 Stack 和 CustomPaint 创建身体上方的曲线。希望能有所帮助。

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  static const String _title = 'Flutter Code Sample';

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: _title,
      home: Scaffold(
        appBar: AppBar(title: const Text(_title), elevation: 0),
        body: Stack(children: [
          ListView(
            children: List.generate(
              100,
              (i) {
                return ListTile(
                  title: Text(
                    'item $i',
                    textAlign: TextAlign.center,
                  ),
                );
              },
            ),
          ),
          Positioned(
            top: 0,
            left: 0,
            right: 0,
            height: 100,
            child: CustomPaint(
              painter: ShapePainter(),
              child: Container(),
            ),
          ),
        ]),
      ),
    );
  }
}

class ShapePainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    var path = Path();
    path.moveTo(0, 0);
    path.lineTo(size.width, 0);
    path.lineTo(size.width, size.height);
    path.arcToPoint(
      Offset(0, size.height),
      radius: Radius.circular(size.width * 0.7),
      clockwise: false,
    );
    path.close();

    var paint = Paint();
    paint.color = Colors.blue;
    paint.style = PaintingStyle.fill;

    canvas.drawPath(path, paint);
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) => true;
}

这就是结果