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时,我们常常会遇到如下场景:进入一个页面后,要先进行网络调用,然后使用调用返 ...
随机推荐
- [Linux] 启动管理: 运行级别
Link:https://www.cnblogs.com/farwish/p/14983932.html
- 从 Uno Platform 4 更新 Uno Platform 5 的迁移方法
本文记录我的一个小项目从 Uno Platform 4 更新 Uno Platform 5 的一些变更和迁移方法,由于项目太小,可能踩到的坑不多 官方文档: Migrating to Uno Plat ...
- 2018-2-13-win10-uwp-无法附加到CoreCLR
title author date CreateTime categories win10 uwp 无法附加到CoreCLR lindexi 2018-2-13 17:23:3 +0800 2018- ...
- R3_Elasticsearch Index Setting
索引的配置项按是否可以更改分为static属性与动态配置,所谓的静态配置即索引创建后不能修改.目录如下:生产环境中某索引结构(7.X后有变化) 索引静态配置 1.分片与压缩 index.number_ ...
- 02. rails安装
rails安装 ruby 1.8.6 对应的rails是2.3.2 Ruby 1.8.7 或 1.9.2 对应的rails 2.3.x ruby1.9.3,对应的rails是3.2.12, ruby2 ...
- leaflet 使用高德地图实例
let map = L.map("mapid", { minZoom: 10, maxZoom: 15, center: [37.005646, 114.52044], zoom: ...
- flex布局方案
参考:https://blog.csdn.net/weixin_39717076/article/details/82586915
- Selenium4自动化测试3--元素定位By.NAME,By.LINK_TEXT 和通过链接部分文本定位,By.PARTIAL_LINK_TEXT,css_selector定位,By.CSS_SELECTOR
4-通过名称定位,By.NAME name属性为表单中客户端提交数据的标识,一个网页中name值可能不是唯一的.所以要根据实际情况进行判断 import time from selenium impo ...
- ECMAScript 语言规范每年都会进行一次更新,而备受期待的 ECMAScript 2024 将于 2024 年 6 月正式亮相。目前,ECMAScript 2024 的候选版本已经发布,为我们带来了一系列实用的新功能。
Promise.withResolvers 使用 Promise.withResolvers() 关键的区别在于解决和拒绝函数现在与 Promise 本身处于同一作用域,而不是在执行器中被创建和一次性 ...
- lvs之DR模式的实操演练
理论 我是内部服务,代替我访问外部网络,这是正向代理:代替外部网络访问我,这是反向代理 槽位 sh根据源地址.调度到某个节点,dh,根据目标地址,调度到某个节点, 实战演练 默认策略以及修改策略 查看 ...