news_getx/lib/modules/account/account_page.dart

import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';
import 'package:news_getx/data/services/config.dart';
import 'package:news_getx/data/services/user.dart';
import 'package:news_getx/modules/widgets/button.dart';
import 'package:news_getx/theme/app_colors.dart';
import 'package:news_getx/theme/app_radii.dart';

import 'account_controller.dart';

class AccountPage extends GetView<AccountController> {
  const AccountPage({Key? key}) : super(key: key);

  // 个人页面 头部
  Widget _buildUserHeader() {
    return Container(
      padding: EdgeInsets.all(20.w),
      decoration: BoxDecoration(
          color: AppColors.primaryBackground,
          border: Border(
            bottom: BorderSide(
              color: AppColors.tabCellSeparator,
              width: 2,
            ),
          )),
      child: Column(
        children: [
          // 头像
          Container(
            height: 200.h,
            alignment: Alignment.center,
            child: ClipOval(
              child: Image.asset(
                "assets/images/account_header.png",
                height: 108,
                width: 108,
                fit: BoxFit.fill,
              ),
            ),
          ),

          // 文字
          Text(
            UserService.to.profile.displayName ?? "unknown",
            textAlign: TextAlign.center,
            style: TextStyle(
              color: AppColors.primaryText,
              fontFamily: "Montserrat",
              fontWeight: FontWeight.w400,
              fontSize: 24.sp,
            ),
          ),
          Container(
            margin: EdgeInsets.only(top: 9.h, bottom: 16.h),
            child: Text(
              "@boltrogers",
              textAlign: TextAlign.center,
              style: TextStyle(
                color: AppColors.primaryText,
                fontFamily: "Avenir",
                fontWeight: FontWeight.w400,
                fontSize: 16.sp,
              ),
            ),
          ),

          // 按钮 crossAxisAlignment会导致设置的宽度时效
          FlatButton(
            height: 40.h,
            width: double.infinity,
            onPressed: () {},
            title: "Get Premium - \$9.99",
          ),
        ],
      ),
    );
  }

  // 列表项
  Widget _buildCell({
    required String title,
    String? subTitle,
    int? number,
    bool hasArrow = false,
    GestureTapCallback? onTap,
  }) {
    var rightWidget = <Widget>[
      Text(
        subTitle ?? number?.toString() ?? "",
        textAlign: TextAlign.left,
        style: TextStyle(
          color: AppColors.primaryText,
          fontFamily: "Montserrat",
          fontWeight: FontWeight.w400,
          fontSize: 18.sp,
        ),
      ),
    ];

    if (hasArrow) {
      rightWidget.addAll([
        SizedBox(width: 10.w),
        Icon(Icons.arrow_forward_ios),
      ]);
    }

    return GestureDetector(
      onTap: onTap,
      child: Container(
        color: Colors.white,
        height: 60.h,
        padding: EdgeInsets.symmetric(horizontal: 20.w),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            Text(
              title,
              textAlign: TextAlign.left,
              style: TextStyle(
                color: AppColors.primaryText,
                fontFamily: "Montserrat",
                fontWeight: FontWeight.w400,
                fontSize: 18.sp,
              ),
            ),
            Row(
              children: rightWidget,
            ),
          ],
        ),
      ),
    );
  }

  Widget _divider10() {
    return Divider(
      color: AppColors.secondaryElement,
      thickness: 10.h,
    );
  }

  @override
  Widget build(BuildContext context) {
    return SingleChildScrollView(
      child: Column(
        children: [
          _buildUserHeader(),
          _divider10(),
          _buildCell(
            title: "Email",
            subTitle: "boltrogers@gmail.com",
          ),
          _divider10(),
          _buildCell(
            title: "Favorite channels",
            number: 12,
            hasArrow: true,
          ),
          _buildCell(
            title: "Bookmarks",
            number: 294,
            hasArrow: true,
          ),
          _buildCell(
            title: "Popular categories",
            number: 7,
            hasArrow: true,
          ),
          _divider10(),
          _buildCell(
            title: "Newsletter",
            hasArrow: true,
          ),
          _buildCell(
            title: "Settings",
            hasArrow: true,
            onTap: () {
              print("点击测试");
            },
          ),
          _divider10(),
          _buildCell(
            title: "Switch Gray Filter",
            hasArrow: true,
            onTap: () {
              ConfigService.to.changeGrayTheme();
            },
          ),
          _buildCell(
            title: "Log out",
            hasArrow: true,
            onTap: () {
              print('Log out');
              UserService.to.onLogout();
            },
          ),
          _divider10(),
        ],
      ),
    );
  }
}