Flutter - 自定义文本框-用CustomPainter - 《Java学习笔记》

方式1

代码

import 'package:eam_page/smartbubble/smart_bubble_widget.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'bubble.dart';
class ApprovalRecord extends StatelessWidget {
  ApprovalRecord({Key key}) : super(key: key);
  List<Map<String,String>> _list = [
    {'des':'流程审批内容', 'person':'张三', 'date':'2021-11-12'},
    {'des':'流程审批内容2啊实打实阿松大啊阿松大阿啊实打实松大阿萨伟大啊飒飒的实打实的啊啊十大阿松大飒飒的', 'person':'王五', 'date':'2021-12-12'},
    {'des':'流程审批内容3', 'person':'赵六', 'date':'2021-12-20'}
  ];
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('审批流程'),),
      body: Container(
          margin: EdgeInsets.only(top: 20),
          child: Column(
              children: List.generate(this._list.length, (index) {
                return Container(
                  width: double.infinity,
                  child: Stack(
                    children: [
                      Container(
                          padding: EdgeInsets.only(left: 20, bottom: 10,top: 10),
                          margin: EdgeInsets.only(left: 20),
                          decoration: BoxDecoration(
                            border: Border(
                              //绘制左边的线
                              left: BorderSide(
                                //绘制边框线，最后一个不绘制
                                color: index == this._list.length -1 ? Colors.white : Colors.blue,
                                width: 1,
                              ),
                            ),
                          ),
                          //右边的内容
                          child: CustomPaint(
                            painter: _MyPainter(
                                color: Colors.blue
                            ),
                            child: Container(
                              width: ScreenUtil().setWidth(500),
                              padding: EdgeInsets.all(3),
                              decoration: BoxDecoration(
                                  borderRadius: BorderRadius.all(Radius.circular(5.0)),
                              ),
                              child: Column(
                                crossAxisAlignment: CrossAxisAlignment.start,
                                children: [
                                  Row(
                                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                                    children: [
                                      Container(
                                        //margin: EdgeInsets.only(left: 5.0,top: 5.0),
                                        child: Text('操作人：${_list[index]['person']}',style: TextStyle(fontSize: 10.0)),
                                      ),
                                      Container(
                                        //margin: EdgeInsets.only(left: 5.0,top: 5.0),
                                        child: Text('时间：${_list[index]['date']}',style: TextStyle(fontSize: 10.0)),
                                      ),
                                    ],
                                  ),
                                  Container(
                                    //color: Colors.black,
                                    //margin: EdgeInsets.only(right: 140.0),
                                    child: Text(
                                        _list[index]['des'],
                                        style: TextStyle(
                                          //color: Colors.white,
                                          fontSize: 12.0,
                                        )
                                    ),
                                  ),
                                ],
                              ),
                            ),
                          )
                      ),
                      //状态圆点
                      Positioned(
                        left: 5.6,
                        top: -2,
                        child: Container(
                          width: ScreenUtil().setWidth(40),
                          height: ScreenUtil().setHeight(45),
                          color: Colors.white,
                          //decoration:   BoxDecoration(color: Colors.white),
                          child: Container(
                            child: Icon(Icons.assignment_ind,color: Colors.blue,size: 30),
                          ),
                          //child: Icon(Icons.assignment_ind,color: Colors.blue,size: 30),
                        ),
                      ),
                    ],
                  ),
                );
              })
          )
      ),
    );
  }
}
//自定义文件框
class _MyPainter extends CustomPainter {
  final Color color;
  _MyPainter({this.color});
  @override
  void paint(Canvas canvas, Size size) {
    Paint paint = Paint()..color = color ..strokeWidth = 1.5;
    //上边的线
    canvas.drawLine(Offset(0 ,0), Offset(size.width,0), paint);
    //底部线
    canvas.drawLine(Offset(0 ,size.height), Offset(size.width,size.height), paint);
    //左上边线
    canvas.drawLine(Offset(0 ,size.height / 2 - 6 ), Offset(0,0), paint);
    //左下边线
    canvas.drawLine(Offset(0 ,size.height), Offset(0, size.height / 2 + 6 ), paint);
    //右边线
    canvas.drawLine(Offset(size.width ,0), Offset(size.width,size.height), paint);
    //三角箭头上边的线
    canvas.drawLine(Offset(-8 ,size.height / 2), Offset(0,size.height / 2 - 6), paint);
    //三角箭头下边的线
    canvas.drawLine(Offset(-8 ,size.height / 2), Offset(0,size.height / 2 + 6), paint);
  }
  @override
  bool shouldRepaint(covariant _MyPainter oldDelegate) => false;
}

方式2

调取

import 'package:eam_page/smartbubble/smart_bubble_widget.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'bubble.dart';

class ApprovalRecord extends StatelessWidget {

  List<Map<String,String>> list;
  ApprovalRecord({ Key key,@required this.list}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return ListView.builder(
        itemCount: this.list.length,
        itemBuilder: (context, index){
          return AppInfo(map: list[index], index: index,);
        }
    );
  }
}

class AppInfo extends StatefulWidget {

  Map<String,String> map;
  int index;
  AppInfo({@required this.map, @required this.index, Key key}) : super(key: key);

  @override
  _AppInfo createState() => _AppInfo(map: map);
}

class _AppInfo extends State<AppInfo> {

  Map<String,String> map;

  _AppInfo({@required this.map}) ;

  double item_height = 0.0;

  GlobalKey textKey = new GlobalKey();

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    // 监听是否渲染完
    WidgetsBinding widgetsBinding = WidgetsBinding.instance;
    widgetsBinding.addPostFrameCallback((callback) {
      //获取相应控件的size
      RenderObject renderObject =textKey.currentContext.findRenderObject();
      setState(() {
        item_height = renderObject.semanticBounds.size.height;
      });

    });

  }

  @override
  Widget build(BuildContext context) {

    return Container(
      color: Colors.white,
      padding: EdgeInsets.only(left: 20, right: 10),
      child: Row(
        children: [
          //左侧的线
          Container(
            margin: EdgeInsets.only(left: 20),
            width: 10,
            height: item_height,
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Expanded(
                  child: Container(
                    width: 0.9,
                    color: Colors.blue,
                  ),
                ),
                Container(
                  height: 10,
                  width: 10,
                  decoration: BoxDecoration(
                    color: Colors.blue,
                    borderRadius:BorderRadius.all(Radius.circular(5)),
                  ),
                ),
                Expanded(
                    child: Container(
                      width: 0.9,
                      color: Colors.blue,
                    )
                ),
              ],
            ),
          ),

          //右侧的内容
          Expanded(
              child: Padding(
                key:textKey,
                padding:const EdgeInsets.only(left:20,top: 5,bottom: 5),
                child: CustomPaint(
                  painter: _MyPainter(

                      color: Colors.blue
                  ),
                  child: Container(
                    width: ScreenUtil().setWidth(500),
                    padding: EdgeInsets.all(3),
                    child: Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          Row(
                            mainAxisAlignment: MainAxisAlignment.spaceBetween,
                            children: [
                              Container(
                                //margin: EdgeInsets.only(left: 5.0,top: 5.0),
                                child: Text('操作人：${map['person']}',style: TextStyle(fontSize: 10.0)),
                              ),
                              Container(
                                //margin: EdgeInsets.only(left: 5.0,top: 5.0),
                                child: Text('时间：${map['date']}',style: TextStyle(fontSize: 10.0)),
                              ),
                            ],
                          ),
                          Container(
                            //color: Colors.black,
                            //margin: EdgeInsets.only(right: 140.0),
                            child: Text(
                                map['des'],
                                style: TextStyle(
                                  //color: Colors.white,
                                  fontSize: 12.0,
                                )
                            ),
                          ),
                        ]
                    ),
                  ),
                )

              )
          ),
        ],
        //右侧的文案
      ),
    );
  }
}


//自定义文件框
class _MyPainter extends CustomPainter {

  final Color color;
  _MyPainter({this.color});

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

    Paint paint = Paint()..color = color ..strokeWidth = 1.5;
    //上边的线
    canvas.drawLine(Offset(0 ,0), Offset(size.width,0), paint);
    //底部线
    canvas.drawLine(Offset(0 ,size.height), Offset(size.width,size.height), paint);
    //左上边线
    canvas.drawLine(Offset(0 ,size.height / 2 - 6 ), Offset(0,0), paint);
    //左下边线
    canvas.drawLine(Offset(0 ,size.height), Offset(0, size.height / 2 + 6 ), paint);
    //右边线
    canvas.drawLine(Offset(size.width ,0), Offset(size.width,size.height), paint);

    //三角箭头上边的线
    canvas.drawLine(Offset(-8 ,size.height / 2), Offset(0,size.height / 2 - 6), paint);
    //三角箭头下边的线
    canvas.drawLine(Offset(-8 ,size.height / 2), Offset(0,size.height / 2 + 6), paint);
  }

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

}