Flutter---个人信息（1）---实现简单的UI

效果图：点击樱桃图片可以从第一个页面跳转到第二个页面

实现UI的代码（没有逻辑的实现）

home_page.dart

Dart 复制代码

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:my_flutter/person_information_page.dart';

class HomePage extends StatefulWidget {
  const HomePage({super.key});

  @override
  State<StatefulWidget> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  var _homeGender = "男"; //性别
  var _homeName = "西西没烦恼"; //昵称
  var _homeBirthday = "2000-01-01"; // 出生年月
  var _homeHeight = "183"; // 身高

  // =======================计算具体年龄的方法=================================
  int get _age {
    try {
      //将字符串格式的生日（如 "2000-01-01"）转换为 DateTime对象
      final birthDate = DateTime.parse(_homeBirthday);
      final now = DateTime.now(); //获取当前日期时间
      int age = now.year - birthDate.year; //计算基础年龄(虚岁)
      if (now.month < birthDate.month || (now.month == birthDate.month && now.day < birthDate.day)) { //判断是否已过生日(实岁)
        age--;
      }
      return age;
    } catch (e) {
      return 23; // 默认年龄
    }
  }

  //构建UI
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        height: double.infinity,
        padding: const EdgeInsets.all(16),
        // 主页背景颜色
        decoration: const BoxDecoration(
          gradient: LinearGradient(//渐变
            begin: Alignment.topCenter,
            end: Alignment.centerRight,
            colors: [
              Color(0xFF62F4F4),
              Color(0xFFF6F7F9),
            ],
          ),
        ),
        child: SingleChildScrollView( //可滚动的页面
          physics: const ClampingScrollPhysics(),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              // 个人信息
              buildUserInfo(),
              const SizedBox(height: 25),
            ],
          ),
        ),
      ),
    );
  }

  //=======================个人信息的UI=====================================
  Widget buildUserInfo() {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        const SizedBox(height: 96),
        // 头像:讲图片裁剪成圆形
        ClipOval(
          child: Image.asset(
            "assets/images/apple.png",
            width: 90,
            height: 90,
            fit: BoxFit.cover,
          ),
        ),
        const SizedBox(height: 8),
        // 昵称
        Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            GestureDetector(
              onTap: () {  //点击跳转个人信息详情页面
                Navigator.push(context, MaterialPageRoute(builder: (context)=> PersonInformationPage()));
              },
              child: Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Text(
                    _homeName, // 名字
                    style: TextStyle(
                      color: const Color(0xFF3D3D3D),
                      fontWeight: FontWeight.bold,
                      fontSize: 24,
                    ),
                  ),
                  const SizedBox(width: 10),
                  Image.asset(
                    "assets/images/cherry.png",
                    width: 20,
                    height: 20,
                  ),
                ],
              ),
            ),
          ],
        ),
        const SizedBox(height: 8),

        // 个人资料
        Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(
              _homeGender, //性别
              style: TextStyle(color: const Color(0xFF3D3D3D), fontSize: 16),
            ),
            // 竖线分隔符
            Container(
              width: 1,
              height: 16,
              margin: const EdgeInsets.symmetric(horizontal: 12),
              color: const Color(0xFFD8D8D8),
            ),
            Text(
              "${_age}岁", // 年龄
              style: TextStyle(color: const Color(0xFF3D3D3D), fontSize: 16),
            ),
            // 竖线分隔符
            Container(
              width: 1,
              height: 16,
              margin: const EdgeInsets.symmetric(horizontal: 12),
              color: const Color(0xFFD8D8D8),
            ),
            Text(
              _homeHeight,//身高
              style: TextStyle(color: const Color(0xFF3D3D3D), fontSize: 16),
            ),
            Text(
              "cm",
              style: TextStyle(color: const Color(0xFF3D3D3D), fontSize: 16),
            ),
          ],
        ),
      ],
    );
  }

}

personal_information_page.dart

Dart 复制代码

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

class PersonInformationPage extends StatefulWidget {
  const PersonInformationPage({super.key});

  @override
  State<StatefulWidget> createState() => _PersonInformationPageState();
}

class _PersonInformationPageState extends State<PersonInformationPage> {
  var _selectedGender = "男";//性别
  var _name = "西西没烦恼"; //昵称
  var _birthday = "2025-10-01";//初始日期
  var _height = "183"; //身高

  // 构建UI
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        height: double.infinity,
        padding: const EdgeInsets.all(16),
        // 主页背景颜色
        decoration: const BoxDecoration(
          gradient: LinearGradient( //颜色渐变
            begin: Alignment.topCenter,
            end: Alignment.centerRight,
            colors: [
              Color(0xFF62F4F4),
              Color(0xFFF7F7F9),
            ],
          ),
        ),
        child: SingleChildScrollView( //可滚动的页面
          child: Column(
            mainAxisAlignment: MainAxisAlignment.start,
            children: [
              const SizedBox(height: 96),
              // 头像:裁剪成圆形
              ClipOval(
                child: Image.asset(
                  "assets/images/apple.png",
                  width: 90,
                  height: 90,
                  fit: BoxFit.cover,
                ),
              ),
              const SizedBox(height: 8),
              Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Text(
                    "点击更换头像",
                    style: TextStyle(
                      color: const Color(0xFF3D3D3D),
                      fontWeight: FontWeight.bold,
                      fontSize: 24,
                    ),
                  ),
                  const SizedBox(width: 10),
                ],
              ),
              const SizedBox(height: 8),
              Text(
                "点击可更换个人信息",
                style: TextStyle(
                  color: const Color(0xFF3D3D3D).withOpacity(0.6),
                  fontSize: 12,
                ),
              ),
              const SizedBox(height: 38),
              // 个人信息列表
              buildListInformation(),
            ],
          ),
        ),
      ),
    );
  }

  //===========================个人信息列表=======================================//
  Widget buildListInformation() {
    return Padding(
      padding: const EdgeInsets.only(top: 10),
      child: Container(
        padding: const EdgeInsets.symmetric(horizontal: 30, vertical: 31),
        decoration: BoxDecoration(
          color: Colors.white,
          borderRadius: BorderRadius.circular(30),
        ),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            // 昵称
            GestureDetector(
              onTap: () {
                // 添加修改昵称的逻辑
              },
              child: Row(
                children: [
                  Text(
                    "昵称",
                    style: TextStyle(fontSize: 16, color: Color(0xFF3D3D3D)),
                  ),
                  const Spacer(),
                  Text(
                    _name,
                    style: TextStyle(
                      color: Color(0xFF3D3D3D).withOpacity(0.6),
                      fontSize: 14,
                    ),
                  ),
                  const SizedBox(width: 6),
                  Image.asset(
                    "assets/images/cherry.png",
                    width: 30,
                    height: 30,
                  ),
                ],
              ),
            ),

            const SizedBox(height: 28),


            // 性别
            GestureDetector(
              onTap: () {

              },
              child: Row(
                children: [
                  Text(
                    "性别",
                    style: TextStyle(fontSize: 16, color: Color(0xFF3D3D3D)),
                  ),
                  const Spacer(),
                  Text(
                    _selectedGender, // 显示当前选中性别
                    style: TextStyle(
                      color: Color(0xFF3D3D3D).withOpacity(0.6),
                      fontSize: 14,
                    ),
                  ),
                  const SizedBox(width: 6),
                  Image.asset(
                    "assets/images/cherry.png",
                    width: 30,
                    height: 30,
                  ),
                ],
              ),
            ),

            const SizedBox(height: 28),
            // 生日
            GestureDetector(
              onTap: () {

              },
              child: Row(
                children: [
                  Text(
                    "生日",
                    style: TextStyle(fontSize: 16, color: Color(0xFF3D3D3D)),
                  ),
                  const Spacer(),
                  Text(
                    _birthday,
                    style: TextStyle(
                      color: Color(0xFF3D3D3D).withOpacity(0.6),
                      fontSize: 14,
                    ),
                  ),
                  const SizedBox(width: 6),
                  Image.asset(
                    "assets/images/cherry.png",
                    width: 30,
                    height: 30,
                  ),
                ],
              ),
            ),

            const SizedBox(height: 28),
            // 身高
            GestureDetector(
              onTap: () {

              },
              child: Row(
                children: [
                  Text(
                    "身高",
                    style: TextStyle(fontSize: 16, color: Color(0xFF3D3D3D)),
                  ),
                  const Spacer(),
                  Text(
                    _height,
                    style: TextStyle(
                      color: Color(0xFF3D3D3D).withOpacity(0.6),
                      fontSize: 14,
                    ),
                  ),
                  Text(
                    "cm",
                    style: TextStyle(
                      color: Color(0xFF3D3D3D).withOpacity(0.6),
                      fontSize: 14,
                    ),
                  ),
                  const SizedBox(width: 6),
                  Image.asset(
                    "assets/images/cherry.png",
                    width: 30,
                    height: 30,
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }

}