dpl12的博客

本篇主要介绍Flutter中Container容器组件的使用.........Container容器组件介绍：Container（容器控件）在Flutter是经常使用的控件，它就相当于我们HTML里的<div>标签。用来放置widget的容器，有padding、margin、位置、大小等参数。具体有以下参数：alignment ：对齐方式 Alignment paddi...

下面介绍Flutter中的水平布局：Flutter中的row控件就是水平控件，它可以让Row里边的子元素进行水平排列。Row控件可以分为灵活排列和非灵活排列两种，这两种模式都需要熟练掌握，等经验丰富后可根据需求进行使用。1、不灵水平布局从字面上就可以理解到，不灵活就是根据Row子元素的大小，进行布局。如果子元素不足，它会留有空隙，如果子元素超出，它会警告。比如现在我们要制作三个...

这里主要介绍页面跳转的时候参数的传递和接受。用在程序上解释就是比如你进入一个商品选择列表，当你想选择一个商品的具体信息的时候，你就要传递商品编号，详细页面接受到编号后，显示出不同的内容。知识点：一、Awesome Flutter snippets组件的使用 我们的代码有些多，这时候我们要加快敲代码的速度，可以使用VSCode 中的Awesome Flutte...

前边已经有了商品列表，下面要做的就是把商品数据传递过去，然后显示商品详情页面。知识点：一、导航参数的传递我们还是使用Navigator组件，然后使用路由MaterialPageRoute传递参数，具体代码如下。Navigator.push( context, MaterialPageRoute( builder:(context)=>new Product...

前边已经介绍了Stack组件，并且进行了两个组件的层叠布局，但是如果是超过两个组件的层叠该如何进行定位那?这就是我们加今天要学的主角Positioned组件了，这个组件也叫做层叠定位组件。知识点：Positioned组件的属性：bottom: 距离层叠组件下边的距离 left：距离层叠组件左边的距离 top：距离层叠组件上边的距离 right：距离层叠组件右边的距离...

Flutter还有一种比较比较酷炫的布局方式，我称它为卡片式布局。这种布局类似ViewList，但是列表会以物理卡片的形态进行展示。demo如下：布局：比如我们现在要开发一个类似电话记录列表，并且列表外部使用一个卡片式布局。卡片式布局默认是撑满整个外部容器的，如果你想设置卡片的宽高，需要在外部容器就进行制定。制作的效果如图：代码：代码中使用了一个垂直布局组件Co...

前言：导航的使用在任何程序里都至关重要，这也是一个程序的灵魂。那这里我们就介绍学习导航的知识。知识点：一、RaisedButton按钮组件它有两个最基本的属性：child：可以放入容器，图标，文字。让你构建多彩的按钮。 onPressed：点击事件的相应，一般会调用Navigator组件。我们在作页面导航时，大量的使用了RaisedButton组件，这个组件的使用在实际工作中...

前面学了页面跳转后，当我们返回页面时返回结果到上一个页面（也就是父页面）。这样的场景经常用于，这里我们去子页面选择了一项选项，然后把选择的结果返回给父级页面。Demo功能：这里要作的例子是这样的，要去找小姐姐，当进入房间后，找到自己喜欢的小姐姐，然后小姐姐给了我们微信，我们这时候就在主页面显示出选择的小姐姐微信。知识点：一、异步请求和等待Dart中的异步请求和等待和...

这里主要介绍项目中资源图片的使用.......知识点：一、pubspec.yaml 文件如果想配置项目资源文件，就需要使用pubspec.yaml文件，需要把资源文件在这里声明。比如在项目根目录下新建了一个images文件夹，文件夹下面放了一个图片，图片的名称叫做blogtouxiang.jpg，那我们在pubspec.yaml文件里就要写如下代码进行声明。注意：assets不要顶...

前面我们介绍了ListView，下面介绍GridView的使用，网格列表经常用来显示多张图片，比如我们经常使用的手机里的相册功能，大部分形式都是网格列表。话不多数，demo源码如下：import 'package:flutter/material.dart';//主函数（入口函数）void main() { runApp(MyApp());}//声明MyApp类继承-S...

前言：水平布局和垂直布局确实很好用，但是有一种情况是无法完成的，比如放入一个图片，图片上再写一些字或者放入容器，这时候Row和Column就力不从心了。Flutter为这种情况准备了Stack层叠布局，这里介绍一下。比如我们现在要作的效果如下：在头像上方再放入一个容器，容器里边写上字，这时候我们就可以使用Stack布局。知识点：一、层叠布局的 alignment 属性...

Flutter框架介绍： Flutter是谷歌的移动UI框架，可以快速在iOS和Android上构建高质量的原生用户界面。Flutter可以与现有的代码一起工作。在全世界，Flutter正在被越来越多的开发者和组织使用，并且Flutter是完全免费、开源的。它也是构建未来的Google Fuchsia应用的主要方式。 Flutter组件采用现代响应式框架构建，这是从R...

这篇文章主要介绍Flutter中Text Widget文本组件的使用......Demo代码如下：import 'package:flutter/material.dart';void main() { runApp(MyApp());}class MyApp extends StatelessWidget{ //重写build方法 @override Wid...

今天主要介绍Flutter中Image图片组件的使用.......Demo源码：import 'package:flutter/material.dart';//主函数（入口函数）void main() { runApp(MyApp());}//声明MyApp类继承-StatelessWidget：具有不可变状态(state)的Widget(窗口小部件).class ...

本篇主要介绍了Flutter中常用的组件ListView列表的简单介绍......话不多说，Demo源码如下：import 'package:flutter/material.dart';//主函数（入口函数）void main() { runApp(MyApp());}//声明MyApp类继承-StatelessWidget：具有不可变状态(state)的Widget...

前面已经对ListView有了清楚的认识，也做出了普通的纵向（竖向列表）。这里我们看看横向列表如何使用。其实还是使用我们的ListView组件，只是在ListView组件里加一个ScrollDirection属性。话不多说，Demo源码如下：import 'package:flutter/material.dart';//主函数（入口函数）void main() { ...

前言：在实际开发中，这种写死的，或者叫静态的列表使用的非常少。我们常用的是动态列表，比如我们的数据从后台读取过来，然后存入一个变量数组里，然后以数组的内容循环出一个列表。一、List类型的使用List是Dart的集合类型之一,其实你可以把它简单理解为数组（反正我是这么认为的），其他语言也都有这个类型。它的声明有几种方式：var myList = List(): 非固定长度...

flutter里面的listview支持竖直列表和水平列表。水平列表 scrollDirection: Axis.horizontal垂直列表scrollDirection: Axis.verticallistview的创建方式也多种多样。item数量固定的可以直接采用children赋值，直接添加子item即好。new ListView( chil...

前言：Column组件即垂直布局控件，能够将子组件垂直排列。其实前边学了Row组件就基本掌握了Column组件，里边的大部分属性都一样，我们还是以文字为例子，来看看Column布局。一、Column基本用法写一段代码，在column里加入三行文字，然后看一下效果。import 'package:flutter/material.dart';void main () => r...

flutter 环境安装以及配置首先需要下载flutter源码，以下是github地址：https://github.com/flutter/flutter然后需要安装git环境吧，下图红框可以自行下载安装接下来需要安装flutter sdk，可以自行创建一个指定的目录，把相应的flutter源码clone下来，如下图，我目前的目录指定在 D:\FlutterGitSo...