扑。如何在列内创建树图结构

Question

我需要为查询生成器创建 UI。我想做类似 this 的事情

问题是我不知道如何创建 And/Or 运算符“括号”。


  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Row(
          children: [
            Operator(),
            Column(
              children: childFiltersAndGroups,
            ),
          ],
        ),
        Actions(...),
      ],
    );
  }

有人可以指导我如何实现 Operator 小部件吗？其余的我不需要帮助。

Answer 1

也许这会有所帮助：

class Operator extends StatelessWidget {
  final String operatorValue;
  final Color color;
  final Color? textBackgroundColor;

  const Operator({Key? key, required this.operatorValue, required this.color, this.textBackgroundColor})
      : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Stack(
      alignment: Alignment.center,
      children: [
        CustomPaint(
          painter: BracketPainter(color),
          size: const Size(double.infinity, double.infinity)
        ),
        Container(
          padding: EdgeInsets.all(4),
          decoration: BoxDecoration(
            borderRadius: const BorderRadius.all(
              Radius.circular(20),
            ),
            color: textBackgroundColor ?? color,
          ),
          child: Text(operatorValue),
        )
      ],
    );
  }
}


class BracketPainter extends CustomPainter {
  final Color color;

  BracketPainter(this.color);

  @override
  void paint(Canvas canvas, Size size) {
    final centerX = size.width / 2;
    final path = Path()
      ..moveTo(size.width, 0)
      ..lineTo(centerX, 0)
      ..lineTo(centerX, size.height)
      ..lineTo(size.width, size.height);
    final paint = Paint()
      ..color = color
      ..style = PaintingStyle.stroke
      ..strokeWidth = 2;
    canvas.drawPath(path, paint);
  }

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

用法示例：

return SizedBox(
  height: 200,
  width: 40,
  child: Operator(
    operatorValue: "AND",
    color: Colors.green,
    textBackgroundColor: Colors.green[300],
  ),
);

在 DartPad 中呈现如下：

扑。如何在列内创建树图结构

Flutter. How to create tree graph structure inside a column

user-interface

flutter

flutter-layout

flutter-web