Flutter项目---我的界面搭建

最新推荐文章于 2024-06-03 00:30:34 发布
最新推荐文章于 2024-06-03 00:30:34 发布
阅读量2k 收藏 11
点赞数 2
原文链接：https://www.cnblogs.com/webor2006/p/13028104.html
版权

我的界面搭建：

先来搭建一下我的界面，目前我的界面是一个空壳：

而最终要的效果是这样：

下面先来搭建界面：

菜单数据准备：

先定义元素文本及图标：

复制代码

import 'package:flutter/material.dart';

class ProfilePage extends StatefulWidget {
  @override
  _ProfilePageState createState() => _ProfilePageState();
}

class _ProfilePageState extends State<ProfilePage> {
  List menuTitles = [
    '我的消息',
    '阅读记录',
    '我的博客',
    '我的问答',
    '我的活动',
    '我的团队',
    '邀请好友',
  ];
  List menuIcons = [
    Icons.message,
    Icons.print,
    Icons.error,
    Icons.phone,
    Icons.send,
    Icons.people,
    Icons.person,
  ];

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Text('我的'),
    );
  }
}

复制代码

构建菜单项：

这里肯定是用ListView来构建了，这块之前学习过，直接上代码：

复制代码

import 'package:flutter/material.dart';

class ProfilePage extends StatefulWidget {
  @override
  _ProfilePageState createState() => _ProfilePageState();
}

class _ProfilePageState extends State<ProfilePage> {
  List menuTitles = [
    '我的消息',
    '阅读记录',
    '我的博客',
    '我的问答',
    '我的活动',
    '我的团队',
    '邀请好友',
  ];
  List menuIcons = [
    Icons.message,
    Icons.print,
    Icons.error,
    Icons.phone,
    Icons.send,
    Icons.people,
    Icons.person,
  ];

  @override
  Widget build(BuildContext context) {
    return ListView.separated(
        itemBuilder: (context, index) {
          if (index == 0) {
            return Container(
              height: 200.0,
              color: Colors.red,
            );
          }
          index -= 1;
          return ListTile(
            leading: Icon(menuIcons[index]), //左图标
            title: Text(menuTitles[index]), //中间标题
            trailing: Icon(Icons.arrow_forward_ios),
          );
        },
        separatorBuilder: (context, index) {
          return Divider();
        }, //分隔线
        itemCount: menuTitles.length + 1);
  }
} 

复制代码

上面由于将头像也做为列表的一项，所以在总列表项个数是+1，比较好理解，先看一下运行效果：

是不是感觉Flutter构建UI代码还是挺少的，像模像样的列表就出来了，接下来则来构建用户头像：

复制代码

@override
  Widget build(BuildContext context) {
    return ListView.separated(
        itemBuilder: (context, index) {
          if (index == 0) {
            //用户头像
            return Center(
              child: Column(
                children: <Widget>[
                  Container(
                    width: 60.0,
                    height: 60.0,
                    decoration: BoxDecoration(
                        shape: BoxShape.circle,
                        border: Border.all(
                          color: Colors.white,
                          width: 2.0,
                        ),
                        image: DecorationImage(
                          image:
                              AssetImage('assets/images/ic_avatar_default.png'),
                          fit: BoxFit.cover,
                        )),
                  )
                ],
              ),
            );
          }
          index -= 1;
          return ListTile(
            leading: Icon(menuIcons[index]), //左图标
            title: Text(menuTitles[index]), //中间标题
            trailing: Icon(Icons.arrow_forward_ios),
          );
        },
        separatorBuilder: (context, index) {
          return Divider();
        }, //分隔线
        itemCount: menuTitles.length + 1);
  }

复制代码

关于BoxDecoration的使用可以参考https://www.cnblogs.com/webor2006/p/12845831.html，其中用到了一个默认图像图：

上面是个纯白的图哦，其实是长这样：

记得要在yaml中声明哦：

运行瞅一下效果：

呃，样式不太对， 咱们先给它加一个背景颜色：

复制代码

@override
  Widget build(BuildContext context) {
    return ListView.separated(
        itemBuilder: (context, index) {
          if (index == 0) {
            //用户头像
            return Container(
              color: Color(AppColors.APP_THEME),
              height: 150.0,
              child: Center(
                child: Column(
                  children: <Widget>[
                    Container(
                      width: 60.0,
                      height: 60.0,
                      decoration: BoxDecoration(
                          shape: BoxShape.circle,
                          border: Border.all(
                            color: Colors.white,
                            width: 2.0,
                          ),
                          image: DecorationImage(
                            image: AssetImage(
                                'assets/images/ic_avatar_default.png'),
                            fit: BoxFit.cover,
                          )),
                    )
                  ],
                ),
              ),
            );
          }
          index -= 1;
          return ListTile(
            leading: Icon(menuIcons[index]), //左图标
            title: Text(menuTitles[index]), //中间标题
            trailing: Icon(Icons.arrow_forward_ios),
          );
        },
        separatorBuilder: (context, index) {
          return Divider();
        }, //分隔线
        itemCount: menuTitles.length + 1);
  }

复制代码

运行：

头像木有居中，所以改一下：

再运行：

接下来则需要在它下面加一个用户名称的文本：

复制代码

@override
  Widget build(BuildContext context) {
    return ListView.separated(
        itemBuilder: (context, index) {
          if (index == 0) {
            //用户头像
            return Container(
              color: Color(AppColors.APP_THEME),
              height: 150.0,
              child: Center(
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: <Widget>[
                    Container(
                      width: 60.0,
                      height: 60.0,
                      decoration: BoxDecoration(
                          shape: BoxShape.circle,
                          border: Border.all(
                            color: Colors.white,
                            width: 2.0,
                          ),
                          image: DecorationImage(
                            image: AssetImage(
                                'assets/images/ic_avatar_default.png'),
                            fit: BoxFit.cover,
                          )),
                    ),
                    SizedBox(
                      //加间距
                      height: 10.0,
                    ),
                    Text(
                      '点击头像登录',
                      style: TextStyle(color: Colors.white),
                    )
                  ],
                ),
              ),
            );
          }
          index -= 1;
          return ListTile(
            leading: Icon(menuIcons[index]), //左图标
            title: Text(menuTitles[index]), //中间标题
            trailing: Icon(Icons.arrow_forward_ios),
          );
        },
        separatorBuilder: (context, index) {
          return Divider();
        }, //分隔线
        itemCount: menuTitles.length + 1);
  }

复制代码

运行：

貌似界面有点不太和谐呀，看这：

所以将标题栏的阴影得去掉，加个属性配置就成了：

再运行看一下：

另外咱们给头像先增加一个点击事件，其它菜单列表暂且先放着不管，这次主要焦点是通过登录这个案例来学会Flutter的网络请求，这里则需要将头像用手势的widget包裹一下了：

复制代码

@override
  Widget build(BuildContext context) {
    return ListView.separated(
        itemBuilder: (context, index) {
          if (index == 0) {
            //用户头像
            return Container(
              color: Color(AppColors.APP_THEME),
              height: 150.0,
              child: Center(
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: <Widget>[
                    GestureDetector(
                      child: Container(
                        width: 60.0,
                        height: 60.0,
                        decoration: BoxDecoration(
                            shape: BoxShape.circle,
                            border: Border.all(
                              color: Colors.white,
                              width: 2.0,
                            ),
                            image: DecorationImage(
                              image: AssetImage(
                                  'assets/images/ic_avatar_default.png'),
                              fit: BoxFit.cover,
                            )),
                      ),
                      onTap: () {
                        //TODO:执行登录
                      },
                    ),
                    SizedBox(
                      //加间距
                      height: 10.0,
                    ),
                    Text(
                      '点击头像登录',
                      style: TextStyle(color: Colors.white),
                    )
                  ],
                ),
              ),
            );
          }
          index -= 1;
          return ListTile(
            leading: Icon(menuIcons[index]), //左图标
            title: Text(menuTitles[index]), //中间标题
            trailing: Icon(Icons.arrow_forward_ios),
          );
        },
        separatorBuilder: (context, index) {
          return Divider();
        }, //分隔线
        itemCount: menuTitles.length + 1);
  }

复制代码

先写个TODO吧，由于跳转到登录时需要使用到了开源中国的API，所以，接下来将焦点转移一下，先来对开源中国的API有一个理性上的认识。

弯弯的小溪
关注
  • 2
    点赞
  • 踩
  • 11
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
flutter-login:使用Flutter的简单登录
05-08
本项目提供了一个简单的登录页面模板，适合初学者学习和开发者快速搭建登录界面。 【描述】"flutter_demo"说明这是一个展示Flutter功能的示例项目。"一个新的Flutter项目"表明它是全新的，用于展示Flutter的基础...
flutter-keep：使用Flutter + Firebase构建的笔记应用程序
02-05
在项目中，Flutter作为开发工具，提供了丰富的组件库和动画效果，使得界面设计既美观又流畅。同时，它支持热重载功能，极大地提升了开发效率。Firebase的集成则让开发者无需搭建服务器，即可快速实现用户注册、登录...
Flutter-微信项目实战框架搭建
Jack, what else can you do besides holding your little darling?
12-23 593
Flutter-微信项目实战框架搭建
flutter写一个漂亮的登录界面
2401_84149635的博客
05-12 958
自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。因此我收集整理了一份《2024年Android移动开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！
我的第一个flutter项目-加载H5界面（Android & Webview）
麦小洛
07-26 1534
第一个flutter项目，主体就是一个主界面： 1.内容点击数字自增 2.跳转一个空页， 3.跳转一个WebView界面 其中涉及添加主键，新建界面类，导入依赖，使用WebView, 兼容http网络安全
Flutter项目快速搭建指南
LuckyWinty的博客
02-24 1124
本文字数：8683字预计阅读时间：30分钟前言：笔者在这之前已经有一年时间没有接触过flutter项目的开发了，目前由于新项目的需要，要重新开始搭建一个flutter项目。让我感到惊讶的是，flutter经历了多年的发展，生态真的越来越完善了，很多之前开发中遇到痛点问题都得到了很好的解决，开发体验倍增。下面我就分享一下这次flutter新项目搭建的经验，主要包括网络请求、数据持久化存储、路由、多...
flutter环境搭建-Dart
hellolipop
07-26 2184
由于我本人平时使用的是vscode写代码的，所以这里介绍的是vscode的一些相关配置。Flutter是由Dart编写的，所以第一步我们先把dart的环境搭建起来。安装好以上插件以后咱们就可以尝试编写代码抛弃来看看了。...
【Flutter--基础】在 macOS 上搭建 Flutter 开发环境
Kevin Learn Android
07-15 1896
在 macOS 上搭建 Flutter 开发环境。
Flutter---移动端开发万金油
m0_69656288的博客
04-20 233
Flutter是一种基于Dart语言的开源移动应用开发框架。它具有高效的开发速度、良好的跨平台支持、强大的UI设计能力、良好的性能和可扩展性等优点，已经成为了移动应用开发的热门选择。本文将从四个方面介绍Flutter为什么是移动端开发的万金油。
flutter入门-环境搭建
itcast_cs的博客
10-29 213
Flutter概述 Flutter是什么 Flutter是谷歌的移动UI框架，可以快速在iOS和Android上构建高质量的原生用户界面，Flutter可以跟现有的代码一起工作，并且可以被世界各地开发者使用，因为他是免费的、开源的！参考flutter中文网 Flutter的特点 Fast development（快速开发） Flutter的热加载可以帮助你快速简单的尝试，构建UI，添加功能或者...
flutter学习-day19-国际化支持
鹏多多的博客
12-25 1411
默认情况下，Flutter SDK中的组件仅提供美国英语本地化资源（主要是文本）。要添加对其他语言的支持，应用程序须添加一个名为“flutter_localizations”的包依赖，然后还需要在MaterialApp中进行一些配置。
Flutter开发 - 使用GetX框架实现类似MVVM架构
跟着哆啦学Android
06-03 597
这个MyApp就是我们程序的入口，相当于Application类，其实最主要是因为在main()方法中调了一个runApp()方法，然后传入了我们的第一个视图。GetPage里面的page指定了这个页面的视图Widget，然后使用binding指定依赖注入，简单说就是不用在使用的时候new对象，直接注入到属性中。databinding里面的ObservableField类可以帮助我们很好的实现数据的双向绑定，通过调用它 的get()方法就可以拿到值了，在xml中也可以很方便地使用其值。
flutter 搭建项目架构
01-12
在本文中，我们将深入探讨如何使用Flutter框架搭建一个完整的项目架构，特别关注如何利用GetX库来实现高效的状态管理和界面更新。Flutter作为一个跨平台的移动应用开发框架，因其丰富的组件库和高性能特性而受到...
android-flutter-demo.zip
05-10
这个“android-flutter-demo.zip”中的示例可能包含了一个简单的Flutter屏幕，展示了如何在Android应用中启动Flutter界面，以及如何通过Platform Channels实现Flutter与Android之间的交互。通过研究这个Demo，开发者...
Flutter完整项目搭建(1)-导航框架
05-29
在本文中，我们将深入探讨Flutter框架中的导航机制，这是构建任何移动或Web应用程序不可或缺的部分。...通过实践和探索`flutter_demo`项目，你可以更深入地了解这些概念并将其应用到自己的项目中。
pillow_heif-0.17.0-pp39-pypy39_pp73-macosx_14_0_arm64.whl
07-27
基本介绍 名称与起源：Pillow，原名为PIL（Python Imaging Library），但PIL只支持Python 2版本。随着Python 3的普及，Pillow作为PIL的一个分支出现，兼容Python 3并提供更多的功能和改进。 主要功能：Pillow支持多种图像格式的打开、保存、显示以及基本的图像操作和处理，如裁剪、缩放、旋转、翻转、滤镜应用等。 跨平台性：Pillow库可以在不同的操作系统上运行，包括Windows、Linux和MacOS等。 主要功能模块 Pillow库包含多个功能模块，每个模块都提供了特定的图像处理功能。以下是一些常用的模块： Image：用于处理图像文件，提供打开、保存、调整大小、旋转、裁剪、滤镜等功能。 ImageDraw：提供在图像上绘制各种形状（如线条、矩形、圆形）和文本的功能。 ImageFont：用于加载和使用TrueType字体文件，以便在图像上绘制文本时设置字体样式、大小和颜色。 ImageFilter：提供各种滤镜效果，如模糊、锐化、边缘增强等，用于图像增强、特效处理和图像识别等应用。 ImageEnhance：用于调整图像的亮度、对比度、颜色饱和度等参数，使图像更加清晰、明亮或具有特定的调色效果。 高级功能 除了基本的图像处理功能外，Pillow还支持一些高级功能，如色彩空间转换、直方图均衡化等。这些功能可以帮助用户进行更复杂的图像处理和分析。
cykooz.resizer-3.0.0-cp310-cp310-macosx_11_0_arm64.whl
07-27
python库，可以直接安装使用，再也不怕自己pip下载，出现等待超时的现象。欢迎下载使用，使用过程中如有使用问题，请及时与我沟通交流，帮你解决！ python库，可以直接安装使用，再也不怕自己pip下载，出现等待超时的现象。欢迎下载使用，使用过程中如有使用问题，请及时与我沟通交流，帮你解决！ python库，可以直接安装使用，再也不怕自己pip下载，出现等待超时的现象。欢迎下载使用，使用过程中如有使用问题，请及时与我沟通交流，帮你解决！ python库，可以直接安装使用，再也不怕自己pip下载，出现等待超时的现象。欢迎下载使用，使用过程中如有使用问题，请及时与我沟通交流，帮你解决！ python库，可以直接安装使用，再也不怕自己pip下载，出现等待超时的现象。欢迎下载使用，使用过程中如有使用问题，请及时与我沟通交流，帮你解决！
[毕设]Delphi题库管理与试卷自动生成系统.zip
最新发布
07-27
[毕设]Delphi题库管理与试卷自动生成系统
flutter-embedded-linux
07-15
在使用Flutter-embedded-linux时，开发者需要在嵌入式Linux平台上搭建Flutter的开发环境，包括安装Flutter SDK、配置相关的依赖库等。然后，可以使用Flutter提供的开发工具和API进行应用的开发和调试。 Flutter-...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值