trackoffical_app/lib/view/home/user_manage/user_manage_page.dart

import 'user_manage_controller.dart';
import 'package:application/widget.dart';

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

  @override
  Widget build(BuildContext context) {
    return GetBuilder(
        init: UserManageController(),
        builder: (c) {
          return Container(
            width: double.infinity,
            height: double.infinity,
            margin: const EdgeInsets.all(20),
            padding: const EdgeInsets.fromLTRB(12, 17, 12, 17),
            decoration: BoxDecoration(
                color: Colors.white, borderRadius: BorderRadius.circular(16)),
            child: Row(
              children: [
                SizedBox(
                    width: 260,
                    height: double.infinity,
                    child: Obx(() => eActiveList(context, c))),
                const VerticalDivider(
                    width: 15, color: Color(0xffd8d8d8), thickness: 1),
                Expanded(child: Obx(() => eUserList(context, c)))
              ],
            ),
          );
        });
  }

  Widget eActiveList(BuildContext context, UserManageController c) {
    return Column(
      children: [
        Row(
          children: [
            const Padding(padding: EdgeInsets.all(8), child: TitlePoint()),
            const Text('活动列表'),
            const Spacer(),
            Container(
              decoration: BoxDecoration(
                  border: Border.all(color: const Color(0xffe3e3e3))),
              child: const Text('2023-06-26'),
            )
          ],
        ),
        const SizedBox(height: 20),
        Expanded(
            child: ListView(
          children: c.activeList
              .map((e) => wActiveCard(
                      context, e, c.selectActive.value?.id == e.id, () {
                    c.selectActive.value = e;
                  }))
              .toList(),
        )),
      ],
    );
  }

  Widget wActiveCard(BuildContext context, ActiveInfo active, bool selected,
      VoidCallback onTap) {
    return GestureDetector(
        onTap: onTap,
        child: Container(
          decoration: const BoxDecoration(color: Colors.white, boxShadow: [
            BoxShadow(color: Color(0x4d000000), blurRadius: 3.5)
          ]),
          height: _cardHeight,
          width: double.infinity,
          margin: const EdgeInsets.only(top: 7),
          padding: const EdgeInsets.only(right: 11),
          child: Row(
            children: [
              Container(
                margin: const EdgeInsets.only(right: 10),
                height: double.infinity,
                width: 6.4,
                color: selected ? const Color(0xffff870d) : Colors.transparent,
              ),
              Text(active.name),
              const Spacer(),
              Text(active.userList.length.toString())
            ],
          ),
        ));
  }

  Widget eUserList(BuildContext context, UserManageController c) {
    final active = c.selectActive.value;

    if (active == null) {
      return const SizedBox();
    }

    final userList = c.selectActive.value?.userList??<UserInfo>[];


    return Column(
      children: [
        Row(
          children: [
            const Padding(padding: EdgeInsets.all(8), child: TitlePoint()),
            const Text('用户列表'),
            Text(' (${active.name})',
                style: const TextStyle(color: Color(0xff949494))),
          ],
        ),
        Expanded(child: Padding(
            padding: const EdgeInsets.all(18),
            child: Column(
              children: [
                eUserListTitle(context),
                Expanded(child: ListView(
                  children:userList.indexed.map<Widget>((t){
                    return eUserCard(context, c, t.$1+1, t.$2);
                  }).toList(),
                ))
              ],
            )
        ))
      ],
    );
  }
  Widget eUserListTitle(BuildContext context){
    return Row(
      children: [
        const SizedBox(width: _userIndexWidth, child: Text('序号', textAlign: TextAlign.center)),
        const VerticalDivider(color: Colors.transparent),
        const SizedBox(width: _userNameWidth, child: Text('用户名', textAlign: TextAlign.center)),
        const VerticalDivider(color: Colors.transparent),
        const Expanded(child: Text('开始时间')),
        const VerticalDivider(color: Colors.transparent),
        const SizedBox(width: _userIsNotShowWidth, child: Text('是否屏蔽', textAlign: TextAlign.center)),
        const VerticalDivider(color: Colors.transparent),
        SizedBox(width: _userFlagWidth, child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: Flag.values.map((e) => Icon(Icons.flag, color: e.color)).toList()
        )),
      ],
    );
  }
  Widget eUserCard(
      BuildContext context, UserManageController c, int index, UserInfo data) {

    var startAt = '--';
    if(data.startAt!= null){
      startAt = data.startAt!.toIso8601String();
    }

    return Container(
      height: _cardHeight,
      width: double.infinity,
      margin: const EdgeInsets.only(top: 3),
      padding: const EdgeInsets.only(top: 10, bottom: 10),
      decoration: const BoxDecoration(
          color: Colors.white,
          boxShadow: [BoxShadow(color: Color(0x4d000000), blurRadius: 0.7)]),
      child: Row(children: [
        SizedBox(width: _userIndexWidth, child: Text(index.toString(), textAlign: TextAlign.center,)),
        const VerticalDivider(),
        SizedBox(width: _userNameWidth, child: Text(data.name, textAlign: TextAlign.center,)),
        const VerticalDivider(),
        Expanded(child: Text(startAt)),
        const VerticalDivider(),
        Container(
          width: _userIsNotShowWidth,
          alignment: Alignment.center,
          child: Checkbox(
            value: data.isHide.value,
            onChanged: (v){
              if(v != null){
                data.isHide.value=v;
              }
            },
          ),
        ),
        const VerticalDivider(),
        SizedBox(width: _userFlagWidth, child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: Flag.values.map((e) => Radio<Flag>(
            value: e,
            groupValue: data.flag.value,
            onChanged: (Flag? value) {
              if(value!= null){
                data.flag.value=value;
              }
            },
          )).toList()
        )),
      ]),
    );
  }
  static const _userIndexWidth = 34.0;
  static const _userNameWidth = 100.0;
  static const _userIsNotShowWidth = 70.0;
  static const _userFlagWidth = 170.0;
  static const _cardHeight = 42.0;

}