前言


上篇关于Flutter的文章总结了下标签+导航的项目模式的搭建,具体的有需要的可以去看看Flutter分类的文章,这篇文章我们简单的总结一下关于Flutter本地文件引用以及简单的自定义List的使用,我们先总结本地图片的引用。今天这篇文章的具体的UI效果如下:

引用本地图片


我们没有使用到的我们暂时先不提,等后面慢慢补充进去,比如说网络图片的显示等等,我们现总结一下关于本地图片的使用,具体的我们需要下面几步:

1、创建文件导入资源

Flutter的文件资源需要我们创建一个文件去管理,我们可以定义一个images的文件,当然这个名字不是固定的但需要留意下它的文件等级,它里面还可以装别的其他资源文件,你要叫Resource也可以的。然后不管是做Android的还是iOS的都知道我们的图片资源是分2x和3x的,所以我们在你创建的文件下面再创建一个2.0x和3.0x的文件夹分别存放相应倍数的图片资源。如下图:

2、不是说直接导入就能直接使用的,还需要处理一下 pubspec.yaml文件,具体的改动如下面所示:

# The following section is specific to Flutter.
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 # To add assets to your application, add an assets section, like this:
# assets:
# - images/a_dot_burr.jpeg
# - images/a_dot_ham.jpeg # An image asset can refer to one or more resolution-specific "variants", see
# https://flutter.dev/assets-and-images/#resolution-aware. # For details regarding adding assets from package dependencies, see
# https://flutter.dev/assets-and-images/#from-packages # To add custom fonts to your application, add a fonts section here,
# in this "flutter" section. Each entry in this list should have a
# "family" key with the font family name, and a "fonts" key with a
# list giving the asset and other descriptors for the font. For
# example:
# fonts:
# - family: Schyler
# fonts:
# - asset: fonts/Schyler-Regular.ttf
# - asset: fonts/Schyler-Italic.ttf
# style: italic
# - family: Trajan Pro
# fonts:
# - asset: fonts/TrajanPro.ttf
# - asset: fonts/TrajanPro_Bold.ttf
# weight: 700
#
# For details regarding fonts from package dependencies,
# see https://flutter.dev/custom-fonts/#from-packages #### 图片资源
assets:
- images/icon_header.png
- images/icon_heath.png
- images/icon_village.png
- images/mine_train.png

前面我们说的文件夹名字不是固定的,绑定使用的的就是assets,这里其实你理解成图片在项目中的层级位置就可以了。看上面Flutter给的注释信息,我们完全可以在导入别的信息,如 fonts等等。

3、现在可以直接使用了,它的使用还是相对比较简单的,我们直接上代码,需要注意的点是使用的时候需要的是图片全程,记得带上后缀。

Image.asset(
"images/icon_header.png",
width: 20,
height: 20,
)

实现上面我的页面


上面的实现我们需要简单的了解几个相应的控件,我们一个一个的介绍一下先,最后就可以出来我们前面的我的页面的UI了。

1、InkWell  它是一个效果控件 ,点击有泼墨的水波的效果 ,经常和Material+颜色透明一起使用。

2、Row 水平组件,首先一点是不管是我们现在说的Row还是我们后面说的 Column只能在继承与StatelessWidget或者StatefullWidget的Widget中使用。

Row({
Key key,
MainAxisAlignment mainAxisAlignment = MainAxisAlignment.start,
MainAxisSize mainAxisSize = MainAxisSize.max,
CrossAxisAlignment crossAxisAlignment = CrossAxisAlignment.center,
TextDirection textDirection,
VerticalDirection verticalDirection = VerticalDirection.down,
TextBaseline textBaseline = TextBaseline.alphabetic,
List<Widget> children = const <Widget>[],
}) : super(
children: children,
key: key,
direction: Axis.horizontal,
mainAxisAlignment: mainAxisAlignment,
mainAxisSize: mainAxisSize,
crossAxisAlignment: crossAxisAlignment,
textDirection: textDirection,
verticalDirection: verticalDirection,
textBaseline: textBaseline,
);

它就这么一个构造方法,还是相对比较简单的,首先它是不能滚动的,但是它可以灵活布局,如果要让某个子组件填充满剩余剩余空间,可以在 children 中使用 Expanded 组件,children 这个属性看上面的源码我们知道,它是一个 Widget 数组,这个我们在后面会使用到。具体的它里面的 Expanded 组件我们下面总结,现不在这里细说。

它里面的属性还是相对比较简单的,可以自己了解学习一下。我们接着看下面的组件。

3、Column

上面说的是水平的,那这个肯定就是竖直的了,其实它俩挺像的,也都是最基础的。我们把它初始化方法放出来对比一下,对比一下前面的Row:

Column({
Key key,
MainAxisAlignment mainAxisAlignment = MainAxisAlignment.start,
MainAxisSize mainAxisSize = MainAxisSize.max,
CrossAxisAlignment crossAxisAlignment = CrossAxisAlignment.center,
TextDirection textDirection,
VerticalDirection verticalDirection = VerticalDirection.down,
TextBaseline textBaseline,
List<Widget> children = const <Widget>[],
}) : super(
children: children,
key: key,
direction: Axis.vertical,
mainAxisAlignment: mainAxisAlignment,
mainAxisSize: mainAxisSize,
crossAxisAlignment: crossAxisAlignment,
textDirection: textDirection,
verticalDirection: verticalDirection,
textBaseline: textBaseline,
);
}

4、Expanded

这个我们也需要说说的,因为我们的Row和Column都需要Expanded,其实它也是比较简单的:

class Expanded extends Flexible {
/// Creates a widget that expands a child of a [Row], [Column], or [Flex]
/// so that the child fills the available space along the flex widget's
/// main axis.
const Expanded({
Key key,
int flex = 1,
@required Widget child,
}) : super(key: key, flex: flex, fit: FlexFit.tight, child: child);
}

我们就需要了解两个参数一个 flex 和一个 child,child我们就不多说了,比较简单,flex 按照一个比例理解,比如两个Expanded , 并排需要控制它们的宽度比例,就可以使用这个属性。这些我们在下面的代码使用中都有体现的。我们代码中细说。

我们看具体的代码,理解了上面大概说的,这个代码就相对比较简单了,我们先看看顶部的头部我们是怎样定义的:

class MineHeader extends StatelessWidget {

  String userHeaderImage;
String userName; /// 这里定义了就可以在外面使用这个方法进行初始化
MineHeader(this.userHeaderImage, this.userName); @override
Widget build(BuildContext context) {
return Container(
color: Colors.orange,
height: 100, /// 水平布局
/// 在Row中使用Expanded的时候,无法指定Expanded中的子组件的宽度width,但可以指定其高度height。
/// 同理,在Column中使用Expanded的时候,
/// 无法指定Expanded中的子组件的高度height,可以指定宽度width。
child: Row(
children: <Widget>[
Expanded(
flex: 1,
child: Container(
padding: EdgeInsets.only(left: 15),
child: Image.asset(
userHeaderImage,
width: 50,
height: 50,
),
),
),
Expanded(
flex: 5,
child: Container(
padding: EdgeInsets.only(left: 15),
child: Text(
userName,
/// 18号 蓝色 加粗
style: TextStyle(
fontSize: 18,
color: Colors.white,
fontWeight: FontWeight.bold),
),
),
),
],
),
);
}
}

需要我们注意的点我们都在上面代码注释中基本上都说了,接下来我们我们看看下面列表的代码:

class MineItemWidget extends StatelessWidget {
String imageName;
String title; @required
VoidCallback onTap; MineItemWidget(this.imageName, this.title, {this.onTap}); @override
Widget build(BuildContext context) {
return Container(
/// 子视图 颜色容器
child: Column(
children: <Widget>[
///
Container(
height: 53,
child: _mineItem(imageName, title),
),
Container(
color: Color(0xffeaeaea),
constraints: BoxConstraints.expand(height: 1.0),
),
],
),
);
} Widget _mineItem(String imageName, String title) {
return InkWell(
onTap: () {
this.onTap();
},
child: Row(
///
children: <Widget>[
Expanded(
flex: 1,
child: Container(
padding: EdgeInsets.only(left: 15),
child: Image.asset(
imageName,
width: 20,
height: 20,
),
),
),
Expanded(
flex: 6,
child: Container(
padding: EdgeInsets.only(left: 15),
child: Text(
title,
style: TextStyle(fontSize: 16),
),
),
),
],
),
);
}
}

最后就是把它俩写到我们的 MinePage ,MinePage的代码如下:

class MinePage extends StatefulWidget {
MinePage({Key key}) : super(key: key);
@override
_MinePageState createState() => _MinePageState();
} class _MinePageState extends State<MinePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: new AppBar(
title: Text("我的"),
backgroundColor: Colors.orange,
elevation: 0, // 去掉Appbar底部阴影
),
body: ListView(
children: <Widget>[
/// 头部的View
MineHeader("images/icon_header.png", "张旭旭旭旭啊"),
/// 线
_listViewLine,
MineItemWidget("images/icon_heath.png", "我的健康", onTap: () {
/// 跳转到查看按钮内容界面
Navigator.push(
context,
MaterialPageRoute(builder: (context) => MineCustomButton()),
);
}),
MineItemWidget("images/icon_village.png", "我的旅行", onTap: () {
print('我的旅行');
}),
_listViewLine,
MineItemWidget("images/mine_train.png", "我的家乡", onTap: () {
print('我的家乡');
}),
],
),
);
} /// 分割线
Widget get _listViewLine {
return Container(
color: Color(0xffeaeaea),
height: 6,
);
}
}

这样整个一个基本的效果就出来了,如最开始我们给的那张图效果一样。打算在后面一篇文章中再说说我们常见到一些组件,按钮,输入框,进度条等等的。

参考文章:

1、 Flutter ListView 自定义

2、详解flutter中本地资源图片的使用

3、项目地址

Flutter 自定义列表以及本地图片引用的更多相关文章

  1. react之本地图片引用

    react之本地图片引用 <img src="../images/photo.png"/> 这种写法在react中是不支持的,所以引用本地图片需要用import或者re ...

  2. Android应用--简、美音乐播放器获取专辑图片(自定义列表适配器)

    Android应用--简.美音乐播放器获取专辑图片(自定义列表适配器) 2013年7月3日简.美音乐播放器开发 第二阶段已增加功能: 1.歌词滚动显示 2.来电监听 3.音量控制 4.左右滑动切换歌词 ...

  3. JSP中&lt;img&gt;标签引用本地图片

    问题描述: jsp页面中<img>标签如何读取本地文件夹中的图片. 问题起因: 由于上传图片至本地文件夹中,图片路径为: D:/upload/file/image/img.jpg 所以将这 ...

  4. Markdown引用本地图片语法

    Markdown引用本地图片语法 markdown引用图片标准方式如下: ![Alt text](/path/to/img.jpg) 测试markdown文本如下: # 测试相对路径图片 ![Alt ...

  5. Flutter学习笔记(19)--加载本地图片

    如需转载,请注明出处:Flutter学习笔记(19)--加载本地图片 上一篇博客正好用到了本地的图片,记录一下用法: 首先新建一个文件夹,这个文件夹要跟目录下 然后在pubspec.yaml里面声明出 ...

  6. Android之获取本地图片并压缩方法

    这两天在做项目时,做到上传图片功能一块时,碰到两个问题,一个是如何获取所选图片的路径,一个是如何压缩图片,在查了一些资料和看了别人写的后总算折腾出来了,在此记录一下. 首先既然要选择图片,我们就先要获 ...

  7. WPF界面设计技巧(4)—自定义列表项样式

    原文:WPF界面设计技巧(4)-自定义列表项样式 有前面修改按钮样式的基础,我们可以尝试来定制一个即好看又好用的 ListBox ,今天先来讲“好看”部分. 打开 Microsoft Visual S ...

  8. 转:【译】Asp.net MVC 利用自定义RouteHandler来防止图片盗链

    [译]Asp.net MVC 利用自定义RouteHandler来防止图片盗链   你曾经注意过在你服务器请求日志中多了很多对图片资源的请求吗?这可能是有人在他们的网站中盗链了你的图片所致,这会占用你 ...

  9. 拍照、本地图片工具类(兼容至Android7.0)

    拍照.本地图片工具类:解决了4.4以上剪裁会提示"找不到文件"和6.0动态授予权限,及7.0报FileUriExposedException异常问题. package com.hb ...

  10. 本地图片上传与H5适配知识

    最近用到本地图片上传作为API的参数,在网上看了许多,记录一下,以后可能用的着(仅自己记录用,看不清请绕路) function getObjectURL(file) { var url = null ...

随机推荐

  1. [解决方案] pythonchallenge level 1

    http://www.pythonchallenge.com/pc/def/map.html g fmnc wms bgblr rpylqjyrc gr zw fylb. rfyrq ufyr amk ...

  2. Font Combiner – 自定义网页字体和图标生成工具

    Font Combiner 是一个功能丰富的 Web 字体生成工具和字体改进工具,提供字距调整.构造子集.各种提示选项和自定义字体字形组合.您可以生成您自己的自定义字体的格式和文件大小. 另外还有成千 ...

  3. Spring MVC+Spring +Hibernate配置事务,但是事务不起作用

    最近做项目,被一个问题烦恼了很久.使用Spring MVC+Spring +Hibernate开发项目,在使用注解配置事务管理,刚开始发现无论如何数据库都无法更新,但是可以从数据库查询到数据.怀疑是配 ...

  4. 精选29款非常实用的jQuery应用插件

    今天我们来分享一些实用的jQuery应用插件,没有特别花哨,但都比较实用,jQuery菜单.jQuery图片都有涉及到,一起来看看. 1.jQuery+CSS3仿IOS无线局域网Wifi DEMO演示 ...

  5. git不能提交jar的设置

      项目目录下 文件:.gitignore ,里面设置: *.class # Package Files # *.jar *.war *.ear 删除*.jar

  6. css系列-间隔与间距实例

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. C++ 容器及选用总结

    目录 ==================================================== 第一章 容器 第二章 Vector和string 第三章 关联容器 第四章 迭代器 第五 ...

  8. svn-主副分支使用

    主改bug 副加功能, :主合并到副(在副中切换主分支),副调试成功,合并回主(在主切换回副分支) 奇葩的实现了需求 主改bug 副加功能, :主合并到副(在副中切换主分支),副调试成功,合并回主(在 ...

  9. 【HOSTS相关】前端提供测试模板地址

    在测试接口的时候,首先需要绑定HOSTS,这个文件的位置在这个目录的下面:C:\WINDOWS\system32\drivers\etc,打开hosts文件的方式选择"记事本"就可 ...

  10. 使用bat将优盘中的dig加到系统环境变量

    第一次使用bat批处理,记录下,方便查阅. @echo off::当前盘符set curPath=%cd%set digPath ="%curPath%tool\dig"set P ...