带有曲线边框的 flutter 容器答案

【问题标题】：flutter container with curve border带有曲线边框的 flutter 容器
【发布时间】：2022-11-18 21:27:24
【问题描述】：

我想要这种带曲线边框的容器，请查看附件图片

答案的最佳解决方案

【问题讨论】：

你可以试试自定义ShapeBorder

标签： flutter dart flutter-layout flutter-web

【解决方案1】：

我将 ShapeBorder 与 paint 一起使用。

class CustomShape extends ShapeBorder {
  @override
  EdgeInsetsGeometry get dimensions => EdgeInsets.zero;

  @override
  Path getInnerPath(Rect rect, {TextDirection? textDirection}) {
    return getInnerPath(rect);
  }

  @override
  Path getOuterPath(Rect rect, {TextDirection? textDirection}) {
    final double curveX = rect.width / 10;
    Path rectPath = Path()
      ..addRRect(RRect.fromRectAndRadius(rect, const Radius.circular(24)));

    Path curvePath = Path()
      ..moveTo(rect.center.dx - curveX, rect.top)
      ..quadraticBezierTo(
        rect.center.dx,
        rect.center.dy - curveX, //middle curve control
        rect.center.dx + curveX,
        rect.top,
      );

    return Path.combine(PathOperation.xor, rectPath, curvePath);
  }

  @override
  void paint(Canvas canvas, Rect rect, {TextDirection? textDirection}) {
    canvas.drawPath(
        getOuterPath(rect),
        Paint()
          ..color = Colors.red
          ..style = PaintingStyle.stroke);
  }

  @override
  ShapeBorder scale(double t) => this;
}

并使用

child: Container(
  height: 200,
  width: 500,
  decoration: ShapeDecoration(
    shape: CustomShape(),
  ),
),

使用quadraticBezierTo值控制曲线

【讨论】：

是的，ShapeBorder 是一个很好的解决方案，但对于简单的情况，这个自定义形状生成器甚至更好（它扩展了OutlinedBorder）：gist.github.com/pskink/… - 所以你需要做的就是实现 pathBuilder 回调（示例是在类代码下方的代码中提供）

【解决方案2】：

我很确定您会在这里找到有用的东西：

Flutter draw container with a curve in the center

希望能帮助到你。

【讨论】：

【解决方案3】：

这是你的剪辑代码...也可以使用Shape Maker设计这样的布局，你将获得剪辑代码

你的ClipContainer和border

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  static const String _title = 'Flutter Code Sample';

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: _title,
      home: Scaffold(
        appBar: AppBar(title: const Text(_title)),
        body: const MyStatefulWidget(),
      ),
    );
  }
}

class MyStatefulWidget extends StatefulWidget {
  const MyStatefulWidget({super.key});

  @override
  State<MyStatefulWidget> createState() => _MyStatefulWidgetState();
}

class _MyStatefulWidgetState extends State<MyStatefulWidget> {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: CustomPaint(
        painter: BorderPainter(),
        child: Container(
          height: 200,
          width: 400,
          child: Center(
            child: Padding(
              padding: EdgeInsets.symmetric(horizontal: 20),
              child:  Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Text('Pakistan'),
                  Spacer(),
                  Text('VS'),
                  Spacer(),
                  Text('India'),
                ],
              ),
            )
          )
        ),
      ),
    );
  }
}

集装箱剪码

class BorderPainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    Paint paint = Paint()
      ..style = PaintingStyle.stroke
      ..strokeWidth = 2
      ..color = Colors.pink;
    Path path0 = Path();
    path0.moveTo(size.width*0.4995083,size.height*0.2401000);
    path0.quadraticBezierTo(size.width*0.5840167,size.height*0.2406000,size.width*0.6666667,size.height*0.1420143);
    path0.lineTo(size.width*0.9996583,size.height*0.1441000);
    path0.lineTo(size.width,size.height);
    path0.lineTo(0,size.height);
    path0.lineTo(0,size.height*0.1422571);
    path0.lineTo(size.width*0.3358333,size.height*0.1442857);
    path0.quadraticBezierTo(size.width*0.4136083,size.height*0.2398857,size.width*0.4995083,size.height*0.2401000);
    path0.close();
    canvas.drawPath(path0, paint);
  }

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

【讨论】：