flutter 尝试创建第一个页面(三)
新建目录 assets 存放图片
在pubspec..yaml 中添加
flutter: # The following line ensures that the Material Icons font is
# included with your application, so that you can use the icons in
# the material Icons class.
uses-material-design: true
assets:
- assets/阿尼亚.jpg
- assets/可可爱爱阿尼亚.jpg
在 目录 lib main.dart文件中添加以下代码
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
// 每个项目最外层,必须有MaterialApp
@override
Widget build(BuildContext context) {
return MaterialApp(
title: '心语航标',
theme: ThemeData(
primarySwatch: Colors.purple,
),
// 通过Home 指定首页
home: MyHome(),
);
}
}
class MyHome extends StatelessWidget{
@override
Widget build(BuildContext context) {
// 在flutter 中 ,每个控件都是一个类
return Scaffold(
appBar: AppBar(
title: Text("心语航标"),
centerTitle: true,
//右侧行为按钮
actions:<Widget>[
IconButton(
icon: Icon(Icons.search),
onPressed: () {},
)
],
),
drawer: Drawer(
child: ListView(
padding: EdgeInsets.all(0),
children:const <Widget>[
UserAccountsDrawerHeader(
accountEmail: Text('newemail@aniya.com'),
accountName: Text('阿尼亚'),
currentAccountPicture: CircleAvatar(
backgroundImage:AssetImage('assets/阿尼亚.jpg') ,),
//美化当前控件的
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage('assets/可可爱爱阿尼亚.jpg'),
fit: BoxFit.cover, // 可选的,根据需要设置图片的适应方式
),
)
),
ListTile(title:Text('用户反馈'),trailing: Icon(Icons.feedback),),
ListTile(title:Text('系统设置'),trailing: Icon(Icons.settings),),
ListTile(title:Text('我要发布'),trailing: Icon(Icons.send),),
ListTile(title:Text('注销'),trailing: Icon(Icons.exit_to_app),)
],
),
),
);
}
}
显示效果

flutter 尝试创建第一个页面(三)的更多相关文章
- 《Symfony 5全面开发》教程03、使用Controller创建第一个页面
我们使用Phpstorm打开我们的项目目录,展开项目目录文件夹. Symfony项目其实也是composer项目,如果你新拿到一个Symfony项目, 你可以在控制台中使用composer insta ...
- symfony2 安装并创建第一个页面
1.安装和配置 参考 http://symfony.cn/docs/book/installation.html 使用安装工具: windows系统 Open your command console ...
- [Umbraco] 创建第一个页面
如何创建一个页面,很简单. 进入settings,首先右键点击“Document Types”, 在出现的菜单点击"Create",在弹出的窗口中 Master Document ...
- Flask学习 1创建第一个页面
#!/usr/bin/env python # encoding: utf-8 """ @version: v1.0 @author: cxa @file: hello. ...
- SSH(三)创建包和第一个页面
在ssh web项目src下一次创建 com.ssh/ .action .dao .entity .service 四个包,example: 在entity包下创建class,name: produc ...
- javascript 中数组的创建 添加 与将数组转换成字符串 页面三种提交请求的方式
创建js数组 var array=new Array(); Java中创建数组 private String[] array=new String[3]; 两个完全不同的,js中是可变长度的 添加内容 ...
- ASP.NET MVC 5 03 - 安装MVC5并创建第一个应用程序
不知不觉 又逢年底, 穷的钞票 所剩无几. 朋友圈里 各种装逼, 抹抹眼泪 MVC 继续走起.. 本系列纯属学习笔记,如果哪里有错误或遗漏的地方,希望大家高调指出,当然,我肯定不会低调改正的.(开个小 ...
- BI之SSAS完整实战教程3 -- 创建第一个多维数据集
上一篇我们已经完成了数据源的准备工作,现在我们就开始动手,创建第一个多维数据集(Cube). 文章提纲 使用多维数据集向导创建多维数据集 总结Cube设计器简介 维度细化 总结 一.使用向导创建多维数 ...
- Ionic学习记录(一):ionic及cordova安装、创建第一个应用、项目结构
目录: 一.ionic的安装 二.创建第一个应用程序 三.浏览器中预览应用 四.项目结构 五.添加页面 一.ionic的安装 使用Ionic创建和开发应用程序主要通过Ionic命令行实用程序(“CLI ...
- 【技术博客】Flutter—使用网络请求的页面搭建流程、State生命周期、一些组件的应用
Flutter-使用网络请求的页面搭建流程.State生命周期.一些组件的应用 使用网络请求的页面搭建流程 在开发APP时,我们常常会遇到如下场景:进入一个页面后,要先进行网络调用,然后使用调用返 ...
随机推荐
- Flagger on ASM——基于Mixerless Telemetry实现渐进式灰度发布系列 3 渐进式灰度发布
简介: 作为CNCF[成员](https://landscape.cncf.io/card-mode?category=continuous-integration-delivery&grou ...
- [Py] Python 接口数据用 pandas 高效写入 csv
通过 pandas 把 dict 数据封装,调用接口方法写入 csv 文件. import pandas as pd data = [{"name": "a"} ...
- [ML] 机器学习简介
监督学习(Supervised Learning) 添加标签,手把手训练. 比如线性回归算法. 半监督学习(Semi-supervised Learning) 非监督学习(Unsupervised L ...
- 一个可以输出当前移动设备机型(安卓,ios)系统版本的html页面
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- AI实战 | 手把手带你打造智能待办助手
背景 大家好,我是努力的小雨.今天我想分享一下搭建待办助手的经历.起初,我并没有什么特别的创意点子.但在4月16日的百度Create大会上,我看到了小度的大模型加持使得其变得更加智能.我被一场示例所震 ...
- Django Admin后台管理:高效开发与实践
title: Django Admin后台管理:高效开发与实践 date: 2024/5/8 14:24:15 updated: 2024/5/8 14:24:15 categories: 后端开发 ...
- Docker手工部署GO环境
参考: (最新2020)Golang 使用Dockerfile 打包部署到 docker https://blog.csdn.net/weixin_44042863/article/details/1 ...
- 使用DP-Modeler、ModelFun模方软件修复实景三维模型教程
P-Modeler DP-Modeler是武汉天际航自主研发的一款集精细化单体建模与Mesh网格模型修饰于一体的软件.支持三维模型一键水面修复.道路置平.建筑局部修饰.删除底部碎片.植被处理.桥隧 ...
- StarCoder2-Instruct: 完全透明和可自我对齐的代码生成
指令微调 是一种技术,它能让大语言模型 (LLMs) 更好地理解和遵循人类的指令.但是,在编程任务中,大多数模型的微调都是基于人类编写的指令 (这需要很高的成本) 或者是由大型专有 LLMs 生成的指 ...
- 通过 OpenAPI 部署 Npcf_PolicyAuthorization-PostAppSessions API Service
目录 文章目录 目录 OpenAPI 部署步骤 OpenAPI 官方网站:https://github.com/OAI/OpenAPI-Specification 支持通过标准的 yaml 文件来生成 ...