俗话说知己知彼百战百胜,如果对Flutter 里面的各种Widgets不了解,那你就别想将它们组合成你想要的效果.从今天开始.会把一个一个的widget 撸一遍..知道它大概的用法.效果.当你想做某个效果的时候.脑袋里面能第一时间想到它. Sample可以在这里找到代码 Sampe code Github Container 作为最常用的内容widget margin,padding, color(background),width,height,children 这些属性很好理解. new C…

Flutter Paddiing 组件 在 html 中常见的布局标签都有 padding 属性,但是 Flutter 中很多 Widget 是没有 padding 属 性.这个时候我们可以用 Padding 组件处理容器与子元素直接的间距. 属性 说明 padding padding 值, EdgeInsetss 设置填充的值 child 子组件 import 'package:flutter/material.dart'; void main() => runApp(MyApp()); cl…

[Flutter Widgets大全]是老孟耗费大量精力整理的,总共有330多个组件的详细用法,开源到Github上,希望可以帮助到大家,开源不易,点个赞可不可以. [Flutter Widgets 大全] 为 Flutter 老孟 网站项目,共收录 330 多个 Widgets,此电子书并不适合入门(一个一个组件学习),适合当作手册,需要的时候进行查阅. 为了方便对比学习,我将相近或相反功能的组件整理到一个文件中,比如所有的 Button 类组件.弹出类组件等. 如果想系统的学习入门知识,请到…

Padding组件: main.dart import 'package:flutter/material.dart'; import 'res/listData.dart'; /* flutter页面布局Padding Row Column Expanded组件详情: */ void main() { runApp(MyApp()); } class MyApp extends StatelessWidget { @override Widget build(BuildContext cont…

1.布局和容器 [布局]是把[容器]按照不同的方式排列起来. Scaffold包含的主要部门:appBar,body,bottomNavigator 其中body可以是一个布局组件,也可以是一个容器组件 2.Layout 布局…

注意:无特殊说明,Flutter版本及Dart版本如下: Flutter版本: 1.12.13+hotfix.5 Dart版本: 2.7.0 InkWell InkWell组件在用户点击时出现"水波纹"效果,InkWell简单用法: InkWell( onTap: (){}, child: Text('这是InkWell点击效果'), ) onTap是点击事件回调,如果不设置无法出现"水波纹"效果,效果如下: 设置水波纹颜色: InkWell( onTap: ()…

注意:无特殊说明,Flutter版本及Dart版本如下: Flutter版本: 1.12.13+hotfix.5 Dart版本: 2.7.0 展示异步任务状态 当有一个Future(异步)任务需要展示给用户时,可以使用FutureBuilder控件来完成,比如向服务器发送数据成功时显示成功提示: var _future = Future.delayed(Duration(seconds: 3), () { return '老孟,一个有态度的程序员'; }); FutureBuilder( fut…

一.Paddiing 组件     padding    EdgeInsetss 设置填充的值     child  组件    return Padding(     padding: EdgeInsets.fromLTRB(0, 0, 10, 0),     child: GridView.count()     )   二. Row 水平布局组件 mainAxisAlignment   主轴的排序方式 crossAxisAlignment   次轴的排序方式 children  组件子元素…

注意:无特殊说明,Flutter版本及Dart版本如下: Flutter版本: 1.12.13+hotfix.5 Dart版本: 2.7.0 基础用法 在展示大量数据的时候我们第一会想到使用ListView,如果你觉得ListView比较单一.枯燥,你可以使用ListWheelScrollView,ListWheelScrollView和ListView同源,但它的渲染效果类似于车轮(或者滚筒),它不是在平面上滑动,而是转动车轮,先来看一波效果: ListWheelScrollView的用法和L…

注意:无特殊说明,Flutter版本及Dart版本如下: Flutter版本: 1.12.13+hotfix.5 Dart版本: 2.7.0 基础用法 应用程序有时候需要弹出消息提示用户,比如'网络连接失败'.'下载成功'等提示,就像Android 等Toast,在Flutter中使用SnackBar组件,用法如下: Scaffold.of(context).showSnackBar(SnackBar( content: Text('老孟,一枚有态度的程序员'), )); 注意并不是在build…