flutter - CustomPaint 在 Flutter 中设计一个下一个

Question

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

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

我是新来的，所以我不知道我是否已经按照应该实现的方式实现了所有东西。我在下面分享了所有代码：

主要.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;
  }
}

标签： flutterflutter-web

Answer 1

检查以下内容。在这里，我使用列表视图来显示内容。在颤振中，重要的是要理解约束从父级到子级而大小从子级到父级的概念。

这是如何实现这一点的演示。飞镖演示

如果孩子没有定义尺寸，那么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;
  }
}