时间戳

首页 > 解决方案 > 如何在一行中添加相同的矩形 10 次

flutter - 如何在一行中添加相同的矩形 10 次

问题描述

我已经创建了一个小矩形，如何在一行中一个接一个地显示 10 个这样的矩形。

我希望 10 个这样的矩形一个接一个地以 aRow 方式显示，但实际上，它只显示一个，我什至尝试在行内添加画布。This is the output I got

class YourdrawRect extends CustomPainter {
    @override
    void paint(Canvas canvas, Size size) {
        canvas.drawRect(
          new Rect.fromLTRB(0.0, 0.0, 4.0, 100.0),
          new Paint()..color = new Color(0xFF0099FF),
        );
        Padding(padding: EdgeInsets.all(8.0));

        canvas.drawRect(
          new Rect.fromLTRB(0.0, 0.0, 4.0, 100.0),
          new Paint()..color = new Color(0xFF0099FE),
        );
        Padding(
          padding: EdgeInsets.all(9.0),
        );
    }
}

标签： flutter

解决方案

此代码应该可以工作：

import 'package:flutter/material.dart';

void main() => runApp(MaterialApp(
      home: MyApp(),
    ));

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('text'),
      ),
      body: Container(
        padding: EdgeInsets.all(32.0),
        child: Center(
            child: Row(
          children: <Widget>[
            // You can add 10 YourRect() here or use loop
            Padding(
              padding: const EdgeInsets.all(8.0),
              child: CustomPaint(
                painter: (YourRect()),
              ),
            ),
            Padding(
              padding: const EdgeInsets.all(8.0),
              child: CustomPaint(
                painter: (YourRect()),
              ),
            ),
          ],
        )),
      ),
    );
  }
}

class YourRect extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    canvas.drawRect(
      new Rect.fromLTRB(0.0, 0.0, 4.0, 100.0),
      new Paint()..color = new Color(0xFF0099FF),
    );
  }

  @override
  bool shouldRepaint(YourRect oldDelegate) {
    return false;
  }
}

推荐阅读