![](https://img-blog.csdnimg.cn/20201014180756919.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
Flutter
若数
连击挑战~
展开
-
Flutter 初探(三):容器类Widgets
学习内容以下是容器类Widgets的部分汇总:Padding布局限制类容器ConstrainedBox和SizedBox装饰类容器DecoratedBox变换TransformContainer容器Scaffold、底部导航各个容器简易实现// Paddingclass NewPadding extends StatelessWidget { @override W...原创 2019-04-20 21:45:57 · 1100 阅读 · 15 评论 -
Flutter 基础布局Widgets之FittedBox详解
FittedBox概述FittedBox组件的作用是对child组件进行缩放和对齐方式的设置,其缩放的参数为fit,有多种选择的方式,而对齐方式alinment用法则和之前一致,即很多都是相通的。FittedBox构造函数const FittedBox({ Key key, this.fit = BoxFit.contain, this.alignment = Ali...原创 2019-04-30 22:22:04 · 599 阅读 · 0 评论 -
Flutter 基础布局Widgets之Expanded详解
Expanded概述Expanded是用于展开Row,Column或Flex的子child的Widget。 使用Expanded可以使[Row],[Column]或[Flex]的子项扩展以填充主轴中的可用空间(例如,水平用[Row]或垂直用[Column])。 如果扩展了多个子节点,则根据[flex]因子将可用空间划分为多个子节点。[Expanded]小部件必须是[Row],[Column]或...原创 2019-05-05 23:03:33 · 3001 阅读 · 3 评论 -
Flutter 基础布局Widgets之Padding、Offstage详解
概述Padding作为一种向内扩充,即用来产生间距的组件,使用的方式也很简单就是是设置内边距属性,产生内边距的空白区域,使用的成本比Container要低一些,可以替代的话推荐使用Padding构造函数const Padding({ Key key, @required this.padding, Widget child, }padding 定义paddi...原创 2019-04-29 20:52:06 · 2291 阅读 · 0 评论 -
Flutter 基础Widgets之容器Container详解
container概述Container是一个非常常用的容器组件,它包含了常规的Padding、BoxDecoration、DecorationImage、Border、BoxShaow、transform等等一系列Widgets。构造函数Container({ Key key, this.alignment, this.padding, Color colo...原创 2019-04-24 22:16:37 · 1106 阅读 · 0 评论 -
Flutter 基础布局Widgets之ConstrainedBox详解
概述ConstrainedBox即创建一个Widget,该Widget对其子child施加附加约束。之前在constrain也有简单使用,即该组件一般集成在constrain中使用。构造函数ConstrainedBox({ Key key, @required this.constraints, Widget child })constraints 其类...原创 2019-05-04 22:54:33 · 1992 阅读 · 0 评论 -
Flutter 初探(二):基础类Widgets和布局类Widgets上手
学习内容以下是关于基础Widgets和布局类Widgets的部分汇总基础类包括:按钮图片及ICON组件单选开关和复选框输入框及表单表单验证布局类Widget包括:纵向布局Row弹性布局Flex流式布局Wrap层叠布局Stackroutes: { "new_page": (context) => NewRoute(), // 使...原创 2019-04-19 21:30:51 · 1342 阅读 · 4 评论 -
Flutter 基础布局Widgets之Row详解
概述Row即创建一个水平的组件列表,是非常常用的组件,而Column即创建一个垂直的组件列表,用法和Row一模一样,因为Row以及Column都是Flex的子类,它们的具体实现也都是由Flex完成,只是参数不同。构造函数Row({ Key key, MainAxisAlignment mainAxisAlignment = MainAxisAlignment.start, ...原创 2019-04-28 21:43:33 · 722 阅读 · 3 评论 -
Flutter 基础布局Widgets之Align详解
概述一般来说,Align的使用都是其他控件的一个参数,目的是为了设置子child的对齐方式,比如居中,左上,右下等多个对齐方向,其本身用法也多灵活。构造函数const Align({ Key key, this.alignment = Alignment.center, this.widthFactor, this.heightFactor, Widg...原创 2019-05-03 22:07:56 · 526 阅读 · 0 评论 -
Flutter 基础Widgets Text()之TextStyle详解
Text概述即一个单一样式的文本Text Widget就是显示单一样式的文本字符串。字符串可能会跨越多行,也可能全部显示在同一行上,具体取决于布局约束。style参数可选。如果省略了,文本将使用最近的DefaultTextStyle的样式。如果给定样式的TextStyle.inherit属性为true(默认值),则给定样式将与最近的DefaultTextStyle合并。例如,比如可以在使用默...原创 2019-04-23 23:49:24 · 4507 阅读 · 0 评论 -
Flutter 基础布局Widgets之Baseline、AspectRatio详解
Baseline概述Baseline即根据child的baseline定位child的小部件,即使得不同的child都处在规定的基线位置,尤其是多用在文字排版中,比如使得不同大小的文字处于同一水平线。Baseline构造函数 const Baseline({ Key key, @required this.baseline, @required this.baseli...原创 2019-05-02 22:57:27 · 542 阅读 · 0 评论 -
Flutter 初探
剖析官方Demo当我们安装好Fultter后,我们可以看见main.dart预置了一段代码,即官方的一个简单Demo,功能即一个简单的计数器,点击右下角的"+",对应屏幕的数字也会增加,显示效果:以下为源码:import 'package:flutter/material.dart';void main() => runApp(new MyApp());class MyApp...原创 2019-04-18 21:55:24 · 861 阅读 · 2 评论 -
Flutter 基础布局Widgets之Stack详解
概述Stack 组件是一种层叠式布局,即组件覆盖另一个组件,覆盖的顺序取决于在children中放置的顺序,使用场景比如在图片上加上一些文字描述,即将文本Widget覆盖在图片组件,详见下面的小例。构造函数 Stack({ Key key, this.alignment = AlignmentDirectional.topStart, this.textDirecti...原创 2019-04-27 20:38:48 · 1074 阅读 · 0 评论 -
Flutter 基础Widgets之AppBar详解
概述AppBar Material风格应用栏,有工具栏和其他的Widget构成 应用栏通常用于Scaffold.appBar属性,该属性将应用栏放置在屏幕顶部的固定高度小部件中。对于可滚动的应用栏,请参阅SliverAppBar,它将一个AppBar嵌入到一个条子中,以便在CustomScrollView中使用。appBar构造函数AppBar({ Key key, thi...原创 2019-04-26 23:01:07 · 1097 阅读 · 0 评论 -
Flutter with Dart 入坑记录
Flutter + VSCode 环境 搭建及测试全程请跟着教程走:起步:安装Flutter:https://flutterchina.club/get-started/install/途中多次遇坑,是的,能遇到的我都会遇到。最佳解决方案就是根据 flutter doctotr 遇到的问题和在启动配合VSCode创建第一个项目遇到的问题,一个个解决,步步为营,解决方案: 复制问题 --&g...原创 2019-04-17 21:51:23 · 874 阅读 · 0 评论 -
Flutter 初探(四):滚动类Widgets
学习内容以下是可滚动Widgets的部分汇总:SingleChildScrollViewListViewGridViewCustomScrollView简单使用// SingleChildScrollViewclass NewSingleChildScrollView extends StatelessWidget { @override Widget build(Bu...原创 2019-04-21 22:30:42 · 682 阅读 · 0 评论 -
Flutter实战之独立实现官网Demo单词收藏Demo
概述这是一次独立尝试,即独立完成实现Flutter文档第一个项目的最终效果,实现目标即首页为一个可无限滚动的单词列表,点击单词右边的小心心即可收藏或者取消收藏,可以在右上角的列表页查看收藏的单词,自己实现的效果如下:首页:单词收藏页:实现思路看到这样一个功能,即可以分为两个页面,第一个页面本质就是一个列表页,每个列表分为两部分,即单词和收藏按钮,而第二个页面只需要显示单词,布局简单拆...原创 2019-04-25 21:22:18 · 813 阅读 · 1 评论 -
Flutter 基础布局Widgets之Wrap详解
概述Wrap好似Row和Column的结合,在横轴的表现和Row一致,而竖轴的表现和Column一致,比如当’this.direction = Axis.horizontal’时,横轴()的child放置不下时就会在竖轴自动扩展一行。构造函数Wrap({ Key key, this.direction = Axis.horizontal, this.alignment...原创 2019-05-01 16:44:46 · 1643 阅读 · 2 评论