颤振如何创建具有以下内容的容器，以及如何在小部件/容器内绘制自定义边框

Question

我正在尝试实现一个Flutter UI，其外观类似于该图片；

我想创建如下内容，但无法正确划分。希望大家帮助。

onAnswerClicked(event: any)
{
    let target: any = event.target;

    // Check if the one that is clicked is an <a> link
    if (event.target.tagName == "A")
    {
       // If you want to disable the <a> default behavior
       // event.preventDefault()

       // If you want to get the href..
       // event.target.getAttribute("href")
    }

}

MyTri类扩展了CustomPainter {}

CustomShapeBorder类扩展ShapeBorder {}

使用小部件时，出现此错误。

Answer 1

此代码将为您提供类似于以下内容的信息：

import 'package:flutter/material.dart';

final colorEnvelope = Color(0xff444444);

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Center(
          child: Sell(),
        ),
      ),
    );
  }
}

class Sell extends StatelessWidget {
  final Color borderColor = Colors.blueGrey.shade400;
  final BorderStyle borderStyle = BorderStyle.solid;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('border: Border')),
      body: Center(
        child: Container(
          width: 180,
          decoration: BoxDecoration(
            color: Colors.transparent,
            borderRadius: BorderRadius.circular(20),
            border: Border.all(
              color: borderColor,
              style: borderStyle,
            ),
          ),
          child: Column(
              mainAxisAlignment: MainAxisAlignment.start,
              mainAxisSize: MainAxisSize.min,
              children: <Widget>[

                  Container(
                  //padding: EdgeInsets.all(10),
                  alignment: Alignment.center,
                  decoration: ShapeDecoration(
                    shape: CustomShapeBorder(),
                    /*border: Border(
                      top: BorderSide(color: borderColor)
                      color: borderColor,
                    ),*/
                    color: Colors.white,
                  ),
                  margin: const EdgeInsets.all(20.0),
                  child: 
                    Stack(children: <Widget>[
                  Positioned(
                    right: 0,
                    top: 0,
                    child: CustomPaint(
                      size: Size(20,20),
                      painter: MyTri()),
                  ),
                  Padding(
                    padding: EdgeInsets.all(10),
                    child: Column(
                    mainAxisAlignment: MainAxisAlignment.start,
                    mainAxisSize: MainAxisSize.min,
                    children: <Widget>[
                      SizedBox(height: 10),
                    Image.network(
                    "https://flutter.dev/assets/flutter-lockup-c13da9c9303e26b8d5fc208d2a1fa20c1ef47eb021ecadf27046dea04c0cebf6.png",
                    fit: BoxFit.fitHeight,
                  ),
                      SizedBox(height: 10),
                    Text("Living a hectic life"),
                    ]),),]),  // stack
                ),
                Container(
                    alignment: Alignment.topCenter,
                    margin: const EdgeInsets.all(10.0),
                    child: 
                  Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: <Widget>[
                  Column(
                        mainAxisAlignment: MainAxisAlignment.start,
                        mainAxisSize: MainAxisSize.min,
                        children: <Widget>[
                          Text("Living a hectic life"),
                          Text("Living a hectic life"),
                          Text("Living a hectic life"),
                        ]),
                  Icon(Icons.photo),
                  ]),),
                Container(
                  padding: EdgeInsets.all(20),
                  alignment: Alignment.center,
                  decoration: BoxDecoration(
                    border: Border(
                      top: BorderSide(
                        color: borderColor,
                        style: borderStyle,
                      ),
                    ),
                  ),
                  child: Text("11:11:11"),
                ),
              ]),
        ),
      ),
    );
  }
}

class MyTri extends CustomPainter {

  @override
  void paint(Canvas canvas, Size size) {

    Path path = Path();

    path.moveTo(size.width-20, 0);
    path.lineTo(size.width-20, 20);
    path.lineTo(size.width, 20);
    path.close();

    canvas.drawPath(path, Paint()..color = colorEnvelope);

  }

  @override
  bool shouldRepaint(MyTri mytri) => true;

}

class CustomShapeBorder extends ShapeBorder {
  const CustomShapeBorder();

  @override
  Path getInnerPath(Rect rect, {TextDirection textDirection}) => _getPath(rect);

  @override
  Path getOuterPath(Rect rect, {TextDirection textDirection}) => _getPath(rect);

  _getPath(Rect rect) {
    return Path()
      ..moveTo(rect.topLeft.dx, rect.topLeft.dy)
      ..lineTo(rect.bottomLeft.dx, rect.bottomLeft.dy)
      ..lineTo(rect.bottomRight.dx, rect.bottomRight.dy)
      ..lineTo(rect.topRight.dx, rect.topRight.dy + 20)
      ..lineTo(rect.topRight.dx - 20, rect.topRight.dy)
      ..close();
  }

  @override
  EdgeInsetsGeometry get dimensions {
    return EdgeInsets.all(0);
  }

  @override
  ShapeBorder scale(double t) {
    return CustomShapeBorder();
  }

  @override
  void paint(Canvas canvas, Rect rect, {TextDirection textDirection}) {

    Path path = Path()
      ..moveTo(rect.topLeft.dx, rect.topLeft.dy)
      ..lineTo(rect.bottomLeft.dx, rect.bottomLeft.dy)
      ..lineTo(rect.bottomRight.dx, rect.bottomRight.dy)
      ..lineTo(rect.topRight.dx, rect.topRight.dy + 20)
      ..lineTo(rect.topRight.dx - 20, rect.topRight.dy)
      ..close();

    canvas.drawPath(path, Paint()..color = colorEnvelope..style = PaintingStyle.stroke);

  }
}