Flutter 中的行溢出

Question

  SizedBox(
                    height: size.height * 0.5,
                    child: Row(
                      children: [
                        Expanded(
                          flex: 2,
                          child: SizedBox(
                            height: size.height * 0.5,
                            child: Card(
                              margin: const EdgeInsets.fromLTRB(20, 0, 5, 10),
                              key: _cardKey,
                              shape: const RoundedRectangleBorder(
                                borderRadius: BorderRadius.all(
                                  Radius.circular(10),
                                ),
                              ),
                              elevation: 10.0,
                              color: Colors.white,
                              child: Padding(
                                padding:
                                    const EdgeInsets.only(left: 10, top: 10),
                                child: Row(
                                  crossAxisAlignment:
                                  CrossAxisAlignment.stretch,
                                  children: _numbers.map((int number) {
                                    counter++;
                                    return CustomPaint(
                                      painter: BarPainter(
                                        width: cardSize!.width / sample,
                                        height: number,
                                        index: counter,
                                        size: cardSize,
                                      ),
                                    );
                                  }).toList(),
                                ),
                              ),
                            ),
                          ),
                        ),

我想将 Row 限制在卡内，但它溢出了，谁能告诉我为什么会这样？这是问题的图片。

Answer 1

正如本期所指出的flutter issue #31202 CustomPainter 可以在canvas 之外绘制。您可以限制这一点的一种方法是检查您绘制的东西的坐标是否在 canvas.

内

第二种方法是将 CustomPaint 包裹在 ClipRect 中以切断小部件边界之外的所有内容。

编辑： 我刚刚意识到您正在为每一行使用单独的画家。我会使用一个 painter/canvas 来遍历所有数字并立即绘制条形图的所有行。我想这也会提高性能。