CustomPaint 在 Flutter 中逐层设计

Question

我正在尝试使用 flutter 构建一个网站，我希望它的背景在一端有一个不同颜色的波浪角。在这个设计中我需要四个块，即当你滚动时你会显示新的块，每个块的高度应该与屏幕的高度相同。

所以，我想到了使用 CustomPaint 来实现它，所以我开始实施它，但是我收到了大约 500 行错误消息并且它不起作用。

我是 flutter 的新手，所以我不知道我是否按照应有的方式实现了所有内容。我已经在下面分享了所有代码：

main.dart

import 'package:flutter/material.dart';

import 'blocks/block1.dart';
import 'blocks/block2.dart';
import 'blocks/block3.dart';
import 'blocks/block4.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Home(),
    );
  }
}

class Home extends StatefulWidget {
  @override
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SingleChildScrollView(
        child: Column(
          children: <Widget>[
            BlockOne(),
            //BlockTwo(),
            //BlockThree(),
            //BlockFour()
          ],
        ),
      )
    );
  }
}

block1.dart - 块 2、3 和 4 几乎相似： 注意-我没有在下面的这段代码中添加波浪图案，因为它本身不起作用

import 'package:flutter/material.dart';

class BlockOne extends StatefulWidget {
  @override
  _BlockOneState createState() => _BlockOneState();
}

class _BlockOneState extends State<BlockOne> {
  @override
  Widget build(BuildContext context) {
    return LayoutBuilder(
      builder: (context, constraints) {
        if (constraints.maxWidth > 1024)
          return Desktop();
        else
          return Mobile();
      },
    );
  }
}

class Desktop extends StatefulWidget {
  @override
  _DesktopState createState() => _DesktopState();
}

class _DesktopState extends State<Desktop> {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: Text('Desktop'),
    );
  }
}

class Mobile extends StatefulWidget {
  @override
  _MobileState createState() => _MobileState();
}

class _MobileState extends State<Mobile> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: CustomPaint(
        size: const Size(double.infinity, double.infinity),
        painter: MobilePainter(),
      ),
    );
  }
}

class MobilePainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    final height = size.height;
    final width = size.width;
    Paint paint = Paint();
    paint.color = Colors.black;

    Path background = Path();
    background.addRect(Rect.fromLTRB(0, 0, width, height));
    canvas.drawPath(background, paint);
  }

  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) {
    return oldDelegate != this;
  }
}

Answer 1

检查以下内容。这里我使用列表视图来显示内容。在 flutter 中，重要的是要理解约束从 parent 下降到 child 并且大小从 child 上升到 parent 的概念。

这是如何实现的演示。 dartpad demo

如果 child 没有定义大小，那么在 ListView 中你必须定义 itemExtent.

import 'package:flutter/material.dart';

// import 'blocks/block1.dart';
// import 'blocks/block2.dart';
// import 'blocks/block3.dart';
// import 'blocks/block4.dart';

void main() {
  runApp(ScrollableView());
}

class ScrollableView extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Home(),
    );
  }
}

class Home extends StatefulWidget {
  @override
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: ListView(
//         child: Column(
      shrinkWrap: true,
      itemExtent: 200,
      children: <Widget>[
        BlockOne(),
        Container(
          color: Colors.black,
        ),
        BlockOne(),
        Text('Hello'),
        BlockOne(),
        Container(
          color: Colors.black,
        ),
        BlockOne(),
        //BlockTwo(),
        //BlockThree(),
        //BlockFour()
      ],
//         ),
    ));
  }
}

class BlockOne extends StatefulWidget {
  @override
  _BlockOneState createState() => _BlockOneState();
}

class _BlockOneState extends State<BlockOne> {
  @override
  Widget build(BuildContext context) {
    return LayoutBuilder(
      builder: (context, constraints) {
//         if (constraints.maxWidth > 1024)
//           return Desktop();
//         else
        return Mobile();
      },
    );
  }
}

class Desktop extends StatefulWidget {
  @override
  _DesktopState createState() => _DesktopState();
}

class _DesktopState extends State<Desktop> {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: Text('Desktop'),
    );
  }
}

class Mobile extends StatefulWidget {
  @override
  _MobileState createState() => _MobileState();
}

class _MobileState extends State<Mobile> {
  @override
  Widget build(BuildContext context) {
    return CustomPaint(
      size: const Size(double.infinity, double.infinity),
      painter: MobilePainter(),
    );
  }
}

class MobilePainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    final height = size.height;
    final width = size.width;
    Paint paint = Paint();
    paint.color = Colors.green;

    Path background = Path();
    background.addRect(Rect.fromLTRB(0, 0, width, height));
    canvas.drawPath(background, paint);
  }

  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) {
    return oldDelegate != this;
  }
}

CustomPaint 在 Flutter 中逐层设计

CustomPaint designs one below another in Flutter

flutter

flutter-web