Flutter:如何编写以下ExpansionPanel的代码 [英] Flutter: How to code the following ExpansionPanel

问题描述

美好的一天！

我正在寻找以下设计的解决方案:

I am trying to find a solution for the following design:

布局图像(注意:浅灰色的线条只是为了指出布局.以后不应该看到它们)

Layout Image (Note: LightGrey Lines are just to point out the Layout. They should not be visible later on)

ExpansionPanel应包含2列，其中A列在整个高度上扩展(B列需要此高度)，但仅使用一定的宽度.在A列(左侧)中，我想绘制一条起点和终点，并用一条线连接，并在这些点旁边绘制文本.我想在B列(右侧)中显示详细信息.但是，右侧显示的内容数量并不总是相同.因此，A列必须始终填充高度，B列需要显示其所有内容.它还将填充A列使用的剩余宽度.

An ExpansionPanel shall contain 2 Columns, where Column A expands over the whole height (which Column B needs) but only uses a certain width. In Column A (left side), I want to draw a start and end point, connected with a line, and text next to those points. In Column B (right side), I want to show detailed information. However the amount of content shown on right side is not always the same. So Column A has to always fill the height, that Column B needs to show all its contents. It will also fill the remaining width that is used by Column A.

如何编写此示例?

非常感谢！

推荐答案

尝试此 FooPanel 类(键是 IntrinsicHeight 作为 Row 小部件)-当然用您的 CustomPainter 替换 PanelPainter :

try this FooPanel class (the key is IntrinsicHeight as a parent of Row widget) - of course replace PanelPainter with your CustomPainter:

class FooPanel extends StatefulWidget {
  @override
  _FooPanelState createState() => _FooPanelState();
}

class _FooPanelState extends State<FooPanel> with SingleTickerProviderStateMixin {
  var expanded = false;
  AnimationController controller;

  @override
  void initState() {
    super.initState();
    controller = AnimationController(
      vsync: this,
      duration: Duration(milliseconds: 1000),
    );
  }

  @override
  Widget build(BuildContext context) {
    return SingleChildScrollView(
      child: ExpansionPanelList(
        expandedHeaderPadding: EdgeInsets.zero,
        expansionCallback: (i, b)  {
          setState(() => expanded = !b);
          if (expanded) {
            controller.forward(from: 0.0);
          }
        },
        children: [
          ExpansionPanel(
            headerBuilder: (ctx, b) => Align(alignment: Alignment.centerLeft , child: Text('London - Paris', textScaleFactor: 2)),
            body: IntrinsicHeight(
              child: Row(
                crossAxisAlignment: CrossAxisAlignment.stretch,
                children: [
                  CustomPaint(
                    size: Size.fromWidth(48),
                    painter: PanelPainter(controller),
                  ),
                  Column(crossAxisAlignment: CrossAxisAlignment.start , children: [
                    Text('London', textScaleFactor: 1.5),
                    ...[ 'a direct route', 'price 100 euro', '3 times a day', 'working days only']
                      .map((s) => Text(' • $s')),
                    Text('Paris', textScaleFactor: 1.5),
                  ],),
                ],
              ),
            ),
            isExpanded: expanded,
          ),
        ],
      ),
    );
  }
}

class PanelPainter extends CustomPainter {
  final AnimationController controller;
  final radius0;
  final radius1;
  final h;

  PanelPainter(this.controller) :
    radius0 = CurveTween(curve: Interval(0.3, 0.5)).animate(controller),
    radius1 = CurveTween(curve: Interval(0.5, 0.7)).animate(controller),
    h = CurveTween(curve: Interval(0.7, 1.0)).animate(controller),
    super(repaint: controller);

  @override
  void paint(Canvas canvas, Size size) {
    // timeDilation = 10;
    var rect = (Offset.zero & size).deflate(14);
    var paint = Paint()
      ..style = PaintingStyle.stroke
      ..strokeWidth = 2
      ..color = Colors.green;
    var p0 = Path()
      ..addOval(Rect.fromCircle(center: rect.topCenter, radius: 8 * radius0.value))
      ..addOval(Rect.fromCircle(center: rect.bottomCenter, radius: 8 * radius1.value));
    var p1 = Path()
      ..addRect(Rect.fromCenter(center: rect.center, width: 4, height: rect.height * h.value));
    var combinedPath = Path.combine(PathOperation.union, p0, p1);
    canvas.drawPath(combinedPath, paint);
  }

  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) => true;
}

这篇关于Flutter:如何编写以下ExpansionPanel的代码的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！