如何在 flutter 中创建拆分容器？正确的方法应该是什么？ CustomPainter 还是 Chip？

Question

想要复制一些 UI。我可以 this 使用内置的 flutter 小部件吗？我试过使用 Chip 但没能成功。 CustomPainter 是否适合使用？

Answer 1

我制作了 TestPage，将其放入您的应用程序并查看结果。更改宽度以保持形状完整。中间三个项目，左边一个图标是静态的。

如果你想让它动态，你必须以各种方式修改形状并需要优化

import 'package:flutter/material.dart';

class TestPage extends StatelessWidget {
  const TestPage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    double width = 300;
    return Center(
      child: SizedBox(
          width: width,
          height: width * 0.2442,
          child: CustomPaint(painter: CustomShape())),
    );
  }
}

class CustomShape extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    Path path_0 = Path();
    path_0.moveTo(size.width * 0.8778848, 0);
    path_0.lineTo(size.width * 0.4401651, 0);
    path_0.arcToPoint(Offset(size.width * 0.3433113, size.height * 0.1957085),
        radius:
            Radius.elliptical(size.width * 0.1218096, size.height * 0.4987930),
        rotation: 0,
        largeArc: false,
        clockwise: false);
    path_0.lineTo(size.width * 0.3433113, size.height * 0.1957085);
    path_0.lineTo(size.width * 0.3109976, size.height * 0.3582477);
    path_0.cubicTo(
        size.width * 0.2960634,
        size.height * 0.4332588,
        size.width * 0.2690989,
        size.height * 0.4360304,
        size.width * 0.2538154,
        size.height * 0.3555655);
    path_0.arcToPoint(Offset(size.width * 0.2030523, size.height * 0.1251676),
        radius:
            Radius.elliptical(size.width * 0.2818497, size.height * 1.154135),
        rotation: 0,
        largeArc: false,
        clockwise: false);
    path_0.arcToPoint(Offset(size.width * 0.1860221, size.height * 0.07393831),
        radius:
            Radius.elliptical(size.width * 0.1240584, size.height * 0.5080018),
        rotation: 0,
        largeArc: false,
        clockwise: false);
    path_0.lineTo(size.width * 0.1858475, size.height * 0.07393831);
    path_0.lineTo(size.width * 0.1858475, size.height * 0.07393831);
    path_0.arcToPoint(Offset(size.width * 0.1221152, size.height),
        radius:
            Radius.elliptical(size.width * 0.1221152, size.height * 0.5000447),
        rotation: 0,
        largeArc: true,
        clockwise: false);
    path_0.arcToPoint(Offset(size.width * 0.1858475, size.height * 0.9265087),
        radius:
            Radius.elliptical(size.width * 0.1213292, size.height * 0.4968261),
        rotation: 0,
        largeArc: false,
        clockwise: false);
    path_0.lineTo(size.width * 0.1858475, size.height * 0.9265087);
    path_0.cubicTo(
        size.width * 0.2068950,
        size.height * 0.8824318,
        size.width * 0.2298203,
        size.height * 0.7975861,
        size.width * 0.2549071,
        size.height * 0.6654448);
    path_0.cubicTo(
        size.width * 0.2707364,
        size.height * 0.5833706,
        size.width * 0.2936617,
        size.height * 0.5869468,
        size.width * 0.3087269,
        size.height * 0.6526598);
    path_0.lineTo(size.width * 0.3433113, size.height * 0.8046491);
    path_0.lineTo(size.width * 0.3433113, size.height * 0.8046491);
    path_0.arcToPoint(Offset(size.width * 0.4401651, size.height * 1.000268),
        radius:
            Radius.elliptical(size.width * 0.1218532, size.height * 0.4989718),
        rotation: 0,
        largeArc: false,
        clockwise: false);
    path_0.lineTo(size.width * 0.8778848, size.height * 1);
    path_0.arcToPoint(Offset(size.width * 0.9999782, size.height * 0.5000447),
        radius:
            Radius.elliptical(size.width * 0.1220934, size.height * 0.4999553),
        rotation: 0,
        largeArc: false,
        clockwise: false);
    path_0.lineTo(size.width * 1, size.height * 0.5000447);
    path_0.arcToPoint(Offset(size.width * 0.8778848, 0),
        radius:
            Radius.elliptical(size.width * 0.1221152, size.height * 0.5000447),
        rotation: 0,
        largeArc: false,
        clockwise: false);
    path_0.close();

    Paint paint_0_fill = Paint()..style = PaintingStyle.fill;
    paint_0_fill.color = Colors.grey[500]!;
    canvas.drawPath(path_0, paint_0_fill);
  }

  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) {
    return false;
  }
}

如何在 flutter 中创建拆分容器？正确的方法应该是什么？ CustomPainter 还是 Chip？

How do create a splitting container in flutter? What should be the right approach? CustomPainter or Chip?

flutter

flutter-layout

flutter-web