基础工程：

Flutter系列（四）底部导航+顶部导航+图文列表完整代码_摸金青年v的博客-CSDN博客

一、前言

        本文用flutter实现个人中心页布局，效果如下图：

 

二、使用的组件

        1.颜色渐变：LinearGradient     线性渐变组件

        2.圆形头像：ClipOval    给它的子组件剪裁成圆形

   

三、完整代码

import 'package:flutter/material.dart';/*个人中心页*/
class HomePage extends StatefulWidget {@overrideState<HomePage> createState() => _HomePage();
}class _HomePage extends State<HomePage> {@overrideWidget build(BuildContext context) {return Container(decoration: const BoxDecoration(gradient: LinearGradient(colors: [Color(0xFFBBDEFB), Colors.white70], //背景渐变色：顶部蓝色到底部灰色begin: Alignment.topCenter, //颜色渐变从顶部居中开始end: Alignment.bottomCenter, //颜色渐变从底部居中结束)), //背景装饰：颜色渐变child: Column(children: [topInfo(context), //头像+昵称+编辑资料userDate(), //用户数据：关注+收藏+点赞+历史commonFunction(), //常用功能],),);}/*顶部信息：头像+昵称+编辑资料*/Padding topInfo(BuildContext context){return Padding(padding: const EdgeInsets.fromLTRB(30, 90, 10, 40),child: Row(children: [GestureDetector(child: ClipOval(child: Image.network('https://img-blog.csdnimg.cn/c6dfd375abf1433fa3a42951cc186a2b.jpeg', width: 50, height: 50, fit: BoxFit.cover),),onTap: (){},),const Padding(padding: EdgeInsets.fromLTRB(16, 0, 150, 0),child: Text('昵称', style: TextStyle(fontWeight: FontWeight.w600, fontSize: 16))),TextButton  (style: ButtonStyle(minimumSize: MaterialStateProperty.all(const Size(80, 60)), //按钮宽高设置foregroundColor: MaterialStateProperty.all<Color>(const Color.fromARGB(100, 30, 144, 255)), //背景色shape: MaterialStateProperty.all(RoundedRectangleBorder(borderRadius: BorderRadius.circular(10))), //圆角),child: const Text('编辑资料', style: TextStyle(color: Colors.blueAccent)),onPressed: () {},),],),);}/*用户数据：关注+收藏+历史*/Container userDate(){return Container(margin: const EdgeInsets.all(8),height: 80,width: 360,child: const Row(mainAxisAlignment: MainAxisAlignment.spaceEvenly, //主轴方向（横向）间距children: [Column(children: [Text('66', style: TextStyle(fontWeight: FontWeight.w600, fontSize: 16)),Text('关注'),],),Column(children: [Text('101', style: TextStyle(fontWeight: FontWeight.w600, fontSize: 16)),Text('收藏'),],),Column(children: [Text('278', style: TextStyle(fontWeight: FontWeight.w600, fontSize: 16)),Text('点赞'),],),Column(children: [Text('579', style: TextStyle(fontWeight: FontWeight.w600, fontSize: 16)),Text('历史'),],),],));}/*常用功能*/Container commonFunction(){return Container(margin: const EdgeInsets.all(5),height: 120,width: 360,decoration: BoxDecoration(color: const Color.fromARGB(200, 248, 248, 255),  // 白色borderRadius: BorderRadius.circular(12), // 设置圆角),child: Column(mainAxisAlignment: MainAxisAlignment.spaceEvenly, //垂直方向平分children: [const Align(alignment: Alignment.topLeft,child: Text('  常用功能', style: TextStyle(fontWeight: FontWeight.w600, fontSize: 14)),),Row(mainAxisAlignment: MainAxisAlignment.spaceEvenly, //主轴方向（横向）间距children: [Column(children: [IconButton(icon: const Icon(Icons.message),onPressed: () {},color: Colors.blue,),const Text('消息'),],),Column(children: [IconButton(icon: const Icon(Icons.directions_boat),onPressed: () {},color: Colors.redAccent,),const Text('动态'),],),Column(children: [IconButton(icon: const Icon(Icons.settings),onPressed: () {},color: Colors.green,),const Text('设置'),],),Column(children: [IconButton(icon: const Icon(Icons.output),onPressed: () {},color: Colors.deepOrangeAccent,),const Text('退出'),],)],)],));}}

本文结束