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

Posted 2023-02-23

【中文标题】扑。如何在列内创建树形图结构

【英文标题】：Flutter. How to create tree graph structure inside a column

【发布时间】：2021-10-08 16:23:31

【问题描述】：

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

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

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

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

【参考方案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 中呈现如下：

【讨论】：

有任何东西的小部件不是吗？感谢您向我介绍 CustomPainter :)