luojigou_thinking_core/example/lib/four_page.dart

import 'package:flutter/material.dart';
import 'package:luojigou_thinking_core/src/view/ljg_defined_app_bar/ljg_defined_app_bar.dart';

class FourPage extends StatefulWidget {
  @override
  FourPageState createState() => new FourPageState();
}

class FourPageState extends State<FourPage> {
  late List<CheckTestModel> _mdoelList;

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    _mdoelList = List.generate(10, (index) {
      return CheckTestModel(index % 2 == 0, "王小二" + index.toString());
    }).toList();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Color(0xFFF5F6FA),
      appBar: LJGDefinedAppBar(
        navigationBarBackgroundColor: Colors.white,
        title: '发送给家长',
        trailingWidget: GestureDetector(
          onTap: () {},
          child: Container(
            padding: EdgeInsets.symmetric(horizontal: 16),
            alignment: Alignment.center,
            color: Colors.transparent,
            child: Text(
              '确定',
              style: TextStyle(
                  fontSize: 14,
                  height: 1,
                  color: Color(0xFF5F87F0),
                  fontWeight: FontWeight.w600),
            ),
          ),
        ),
      ),
      body: Container(
        // color: Color(0xFFF5F6FA),
        margin: EdgeInsets.symmetric(horizontal: 16),
        child: Column(
          children: [
            HeaderView(),
            Expanded(
                child: ListView.separated(
                    padding: EdgeInsets.only(bottom: 15),
                    itemBuilder: (_, index) {
                      if (index == 0) {
                        return FirstCell();
                      } else if (index == _mdoelList.length - 1) {
                        return LastCell();
                      }
                      return NormalCell(
                        model: _mdoelList[index - 1],
                      );
                    },
                    separatorBuilder: (_, index) {
                      return DividingLinesView(index: index);
                    },
                    itemCount: _mdoelList.length + 2)),
          ],
        ),
      ),
    );
  }
}

class HeaderView extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      margin: EdgeInsets.symmetric(vertical: 12),
      padding: EdgeInsets.only(top: 20, bottom: 20, left: 12, right: 10),
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.circular(10),
      ),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          Text(
            "全部家长",
            style: TextStyle(
                color: Colors.black,
                fontSize: 16,
                height: 22 / 16,
                fontWeight: FontWeight.w500),
          ),
          CheckedIcon(WH: 23)
        ],
      ),
    );
  }
}

class FirstCell extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      padding: EdgeInsets.only(top: 25, bottom: 22, left: 12, right: 18),
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.only(
            topLeft: Radius.circular(10), topRight: Radius.circular(10)),
      ),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Text(
                "指定家长（93个家长）",
                style: TextStyle(
                    color: Colors.black,
                    fontSize: 16,
                    height: 22 / 16,
                    fontWeight: FontWeight.w500),
              ),
              SizedBox(height: 4),
              Text(
                "选择家长分享评估报告",
                style: TextStyle(
                    color: Color(0xFF9C9AAB),
                    fontSize: 12,
                    height: 17 / 12,
                    fontWeight: FontWeight.w400),
              ),
            ],
          ),
          Container(
            width: 14,
            height: 8,
            child: CustomPaint(
              painter: TrianglePainter(),
            ),
          )
        ],
      ),
    );
  }
}

class NormalCell extends StatelessWidget {
  final CheckTestModel model;

  const NormalCell({
    Key? key,
    required this.model,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.white,
      // margin: EdgeInsets.symmetric(vertical: 12),
      padding: EdgeInsets.only(left: 18, top: 21, bottom: 21),
      child: Row(
        children: [
          model.state
              ? CheckedIcon(WH: 18)
              : UncheckedIcon(
                  WH: 18,
                ),
          SizedBox(width: 15),
          Text(
            "王小二",
            style: TextStyle(
                color: Colors.black,
                fontSize: 16,
                height: 22 / 16,
                fontWeight: FontWeight.w400),
          ),
        ],
      ),
    );
  }
}

class LastCell extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      height: 49,
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.only(
            bottomLeft: Radius.circular(10), bottomRight: Radius.circular(10)),
      ),
    );
  }
}

class TrianglePainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    // TODO: implement paint
    Paint paint = Paint()
      ..color = Color(0xFFCACACA)
      ..strokeWidth = 1.5
      ..style = PaintingStyle.stroke;

    Path path = Path();

    path.moveTo(0, size.height);
    path.lineTo(size.width / 2, 0);
    path.lineTo(size.width, size.height);
    // path.close();

    canvas.drawPath(path, paint);
  }

  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) {
    // TODO: implement shouldRepaint
    return true;
  }
}

class DividingLinesView extends StatelessWidget {
  final int index;

  const DividingLinesView({
    Key? key,
    required this.index,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Row(
      children: [
        Container(
          width: index == 0 ? 0 : 16,
          height: 1,
          color: Colors.white,
        ),
        Expanded(
          child: Container(
            height: 1,
            color: Color(0xFFEEEEEE),
          ),
        ),
      ],
    );
  }
}

//未选中Icon
class UncheckedIcon extends StatelessWidget {
  final double WH;

  const UncheckedIcon({
    Key? key,
    required this.WH,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      width: WH,
      height: WH,
      decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(WH / 2),
          border: Border.all(color: Color(0xFFD1D1D1), width: 1.3)),
    );
  }
}

//选中Icon
class CheckedIcon extends StatelessWidget {
  final double WH;

  const CheckedIcon({
    Key? key,
    required this.WH,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      width: WH,
      height: WH,
      decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(WH / 2),
          color: Color(0xFF5F87F0)),
      child: Icon(
        Icons.check_rounded,
        color: Colors.white,
        size: WH - 6,
      ),
    );
  }
}

class CheckTestModel {
  final bool state;
  final String title;

  CheckTestModel(this.state, this.title);
}