Question

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

我希望以行的方式一个接一个地出现10个这样的矩形，但是实际上，它只显示了一个，我什至尝试在行内添加画布。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),
        );
    }
}

Answer 1

此代码应该有效：

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;
  }
}

Answer 2

好吧，您可以将ListView.builder与Axis.horizontal一起使用

ListView.builder(
              scrollDirection: Axis.horizontal,
              itemCount: 10,
              itemBuilder: (context, position) {
                return Padding(
                  padding: const EdgeInsets.all(8.0),
                  child: CustomPaint(
                    painter: YourdrawRect(),
                  ),
                );
              })

如何连续添加同一矩形10次

2 个答案: