在中間有文本的容器周圍顫動邊框（分隔線？）

我嘗試在容器周圍創建邊框，當然這并不難，但我還需要在邊框中添加一個文本，并在其周圍留出空間。像水平分隔線，但我需要一個完整的邊框。

附上我想要達到的目標。

任何人都可以幫助我如何解決這個問題？

謝謝！

嘗試使用水平和垂直分隔符包，但邊界不完整。

uj5u.com熱心網友回復：

你可以CustomPainter這樣使用：

class CustomDraw extends CustomPainter {
  late Paint painter;
  late double radius;
  late double textWidth;

  CustomDraw(Color color, this.textWidth, {this.radius = 0}) {
    painter = Paint()
      ..style = PaintingStyle.stroke
      ..strokeWidth = 2
      ..color = color;
  }

  @override
  void paint(Canvas canvas, Size size) {
    var path = Path();

    path.moveTo(size.width - ((size.width - textWidth) / 2), 0);

    path.lineTo(size.width - radius, 0);
    path.cubicTo(size.width - radius, 0, size.width, 0, size.width, radius);
    path.lineTo(size.width, size.height - radius);
    path.cubicTo(size.width, size.height - radius, size.width, size.height,
        size.width - radius, size.height);

    path.lineTo(radius, size.height);
    path.cubicTo(radius, size.height, 0, size.height, 0, size.height - radius);

    path.lineTo(0, radius);
    path.cubicTo(0, radius, 0, 0, radius, 0);
    path.lineTo(((size.width - textWidth) / 2), 0);

    canvas.drawPath(path, painter);
  }

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

這個小部件：

class CustomTitleWidget extends StatefulWidget {
  final double height;
  final double width;
  final double? radius;
  final String title;
  const CustomTitleWidget(
      {Key? key,
      required this.height,
      required this.width,
      required this.title,
      this.radius})
      : super(key: key);

  @override
  State<CustomTitleWidget> createState() => _CustomTitleWidgetState();
}

class _CustomTitleWidgetState extends State<CustomTitleWidget> {
  GlobalKey textKey = GlobalKey();
  double textHeight = 0.0;
  double textWidth = 0.0;

  @override
  void initState() {
    super.initState();

    WidgetsBinding.instance.addPostFrameCallback((_) {
      setState(() {
        final textKeyContext = textKey.currentContext;
        if (textKeyContext != null) {
          final box = textKeyContext.findRenderObject() as RenderBox;
          textHeight = box.size.height;
          textWidth = box.size.width;
        }
      });
    });
  }

  @override
  Widget build(BuildContext context) {
    return Stack(
      clipBehavior: Clip.none,
      alignment: Alignment.topCenter,
      children: [
        CustomPaint(
          child: Container(
            height: widget.height,
            width: widget.width,
          ),
          painter: CustomDraw(
            Colors.red,
            textWidth,
            radius: widget.radius ?? 0,
          ),
        ),
        Positioned(
          top: -textHeight / 2,
          child: Padding(
            key: textKey,
            padding: EdgeInsets.symmetric(horizontal: 8.0),
            child: Text(
              widget.title,
            ),
          ),
        )
      ],
    );
  }
}

像這樣使用：

CustomTitleWidget(
                height: 200,
                width: double.infinity,
                title: 'asdasdasdasdasd',
                radius: 16),

uj5u.com熱心網友回復：

@Maenda，我們可以使用 Stack 實作這種結構，取一個帶邊框的容器并將另一個容器放在第一個容器上。

這是一個例子：

Stack(
      children: [
        Positioned(
            top: 12,
            left: 0,
            right: 0,
            child: Container(
              height: 120,
              width: MediaQuery.of(context).size.width,
              margin: EdgeInsets.symmetric(horizontal: 10, vertical: 10),
              padding: EdgeInsets.all(8),
              decoration: BoxDecoration(
                  color: Colors.green,
                  border: Border.all(width: 1.2),
                  borderRadius: BorderRadius.circular(3)),
            )),
        Container(
          margin: EdgeInsets.symmetric(
            horizontal: 21,
          ),
          child: Column(
            children: [
              Container(
                width: 100,
                margin: EdgeInsets.only(top: 12, bottom: 5),
                alignment: Alignment.center,
                color: Colors.blue,
                child: Text(
                  "Any Text",
                  style: TextStyle(
                    fontSize: 16,
                    fontWeight: FontWeight.w500,
                  ),
                ),
              ),
              Text(
                "Nature, in the broadest sense, is the physical world or universe. Nature can refer to the phenomena of the physical world, and also to life in general.",
                textAlign: TextAlign.center,
              ),
              SizedBox(
                height: 8,
              )
            ],
          ),
        ),
      ],
    );

希望這有效！您可以根據設計進行自定義。

標籤：扑镖颤振布局

上一篇：我需要串列中“hh：mma”格式的日期和時間串列List<int>顫動

下一篇：如何在螢屏顫動之間傳遞資料？