若数的博客

学习内容以下是容器类Widgets的部分汇总：Padding布局限制类容器ConstrainedBox和SizedBox装饰类容器DecoratedBox变换TransformContainer容器Scaffold、底部导航各个容器简易实现// Paddingclass NewPadding extends StatelessWidget { @override W...

FittedBox概述FittedBox组件的作用是对child组件进行缩放和对齐方式的设置，其缩放的参数为fit，有多种选择的方式，而对齐方式alinment用法则和之前一致，即很多都是相通的。FittedBox构造函数const FittedBox({ Key key, this.fit = BoxFit.contain, this.alignment = Ali...

Expanded概述Expanded是用于展开Row，Column或Flex的子child的Widget。 使用Expanded可以使[Row]，[Column]或[Flex]的子项扩展以填充主轴中的可用空间（例如，水平用[Row]或垂直用[Column]）。 如果扩展了多个子节点，则根据[flex]因子将可用空间划分为多个子节点。[Expanded]小部件必须是[Row]，[Column]或...

概述Padding作为一种向内扩充，即用来产生间距的组件，使用的方式也很简单就是是设置内边距属性，产生内边距的空白区域，使用的成本比Container要低一些，可以替代的话推荐使用Padding构造函数const Padding({ Key key, @required this.padding, Widget child, }padding 定义paddi...

container概述Container是一个非常常用的容器组件，它包含了常规的Padding、BoxDecoration、DecorationImage、Border、BoxShaow、transform等等一系列Widgets。构造函数Container({ Key key, this.alignment, this.padding, Color colo...

概述ConstrainedBox即创建一个Widget，该Widget对其子child施加附加约束。之前在constrain也有简单使用，即该组件一般集成在constrain中使用。构造函数ConstrainedBox({ Key key, @required this.constraints, Widget child })constraints 其类...

学习内容以下是关于基础Widgets和布局类Widgets的部分汇总基础类包括：按钮图片及ICON组件单选开关和复选框输入框及表单表单验证布局类Widget包括：纵向布局Row弹性布局Flex流式布局Wrap层叠布局Stackroutes: { "new_page": (context) => NewRoute(), // 使...

概述Row即创建一个水平的组件列表，是非常常用的组件，而Column即创建一个垂直的组件列表，用法和Row一模一样，因为Row以及Column都是Flex的子类，它们的具体实现也都是由Flex完成，只是参数不同。构造函数Row({ Key key, MainAxisAlignment mainAxisAlignment = MainAxisAlignment.start, ...

概述一般来说，Align的使用都是其他控件的一个参数，目的是为了设置子child的对齐方式，比如居中，左上，右下等多个对齐方向，其本身用法也多灵活。构造函数const Align({ Key key, this.alignment = Alignment.center, this.widthFactor, this.heightFactor, Widg...

Text概述即一个单一样式的文本Text Widget就是显示单一样式的文本字符串。字符串可能会跨越多行，也可能全部显示在同一行上，具体取决于布局约束。style参数可选。如果省略了，文本将使用最近的DefaultTextStyle的样式。如果给定样式的TextStyle.inherit属性为true（默认值），则给定样式将与最近的DefaultTextStyle合并。例如，比如可以在使用默...

Baseline概述Baseline即根据child的baseline定位child的小部件，即使得不同的child都处在规定的基线位置，尤其是多用在文字排版中，比如使得不同大小的文字处于同一水平线。Baseline构造函数 const Baseline({ Key key, @required this.baseline, @required this.baseli...

剖析官方Demo当我们安装好Fultter后，我们可以看见main.dart预置了一段代码，即官方的一个简单Demo，功能即一个简单的计数器，点击右下角的"+"，对应屏幕的数字也会增加，显示效果：以下为源码：import 'package:flutter/material.dart';void main() => runApp(new MyApp());class MyApp...

概述Stack 组件是一种层叠式布局，即组件覆盖另一个组件，覆盖的顺序取决于在children中放置的顺序，使用场景比如在图片上加上一些文字描述，即将文本Widget覆盖在图片组件，详见下面的小例。构造函数 Stack({ Key key, this.alignment = AlignmentDirectional.topStart, this.textDirecti...

概述AppBar Material风格应用栏，有工具栏和其他的Widget构成 应用栏通常用于Scaffold.appBar属性，该属性将应用栏放置在屏幕顶部的固定高度小部件中。对于可滚动的应用栏，请参阅SliverAppBar，它将一个AppBar嵌入到一个条子中，以便在CustomScrollView中使用。appBar构造函数AppBar({ Key key, thi...

Flutter + VSCode 环境 搭建及测试全程请跟着教程走：起步:安装Flutter：https://flutterchina.club/get-started/install/途中多次遇坑，是的，能遇到的我都会遇到。最佳解决方案就是根据 flutter doctotr 遇到的问题和在启动配合VSCode创建第一个项目遇到的问题，一个个解决，步步为营，解决方案： 复制问题 --&g...

学习内容以下是可滚动Widgets的部分汇总：SingleChildScrollViewListViewGridViewCustomScrollView简单使用// SingleChildScrollViewclass NewSingleChildScrollView extends StatelessWidget { @override Widget build(Bu...

概述这是一次独立尝试，即独立完成实现Flutter文档第一个项目的最终效果，实现目标即首页为一个可无限滚动的单词列表，点击单词右边的小心心即可收藏或者取消收藏，可以在右上角的列表页查看收藏的单词，自己实现的效果如下：首页：单词收藏页：实现思路看到这样一个功能，即可以分为两个页面，第一个页面本质就是一个列表页，每个列表分为两部分，即单词和收藏按钮，而第二个页面只需要显示单词，布局简单拆...

概述Wrap好似Row和Column的结合，在横轴的表现和Row一致，而竖轴的表现和Column一致，比如当’this.direction = Axis.horizontal’时，横轴()的child放置不下时就会在竖轴自动扩展一行。构造函数Wrap({ Key key, this.direction = Axis.horizontal, this.alignment...