Flutter基础_flutter foregroundcolor

环境配置

• 配置全局变量 https://www.cnblogs.com/cheryshi/p/10431268.html
• flutter环境配置：https://www.cnblogs.com/yangyxd/p/8809512.html

概述

• Flutter是一款移动应用程序SDK，一份代码可以同时生成iOS和Android两个高性能、高保真的应用程序；同一份代码开发iOS和Android、简洁、
  在应用程序运行时更改代码并重新加载（通过热重载）闪电符号、
  修复崩溃并继续从应用程序停止的地方进行调试、
  不受原生控件的限制

• 凡是返回weight类型的控件 都可以添加任何组件来实现多种属性
  一、添加圆角：
  ①给各类组件添加圆角https://www.jianshu.com/p/a110b6a11e2f
  ②Container( //color: Colors.white, margin:
  EdgeInsets.fromLTRB(16.px,0.px,16.px,0.5.px), padding:
  EdgeInsets.symmetric( horizontal:13.5.px), decoration:BoxDecoration(
  borderRadius:BorderRadius.circular(8.px), color: Colors.white, ),）
  container添加圆角，需要使用装饰器，但是装饰器声明必须有两个参数，颜色和其他，需要注释外部颜色

二、Container ①只有child ②自适应的写法

constraints:
BoxConstraints( minHeight: 150.px, ), ③边距：container(card())
1
2

marging代表相对于容器的内外边距，而不是子组件的

三、ROW ①宽高的设置，必须添加Container

四、按钮
RaisedButton ：凸起的按钮，其实就是Android中的Material Design风格的Button ，继承自MaterialButton
FlatButton ：扁平化的按钮，继承自MaterialButton
OutlineButton ：带边框的按钮，继承自MaterialButton
IconButton ：图标按钮,继承自StatelessWidget

五、ExpansionTile title:闭合时显示的标题，这个部分经常使用Text Widget。
①leading:标题左侧图标，多是用来修饰，让界面显得美观。
②backgroundColor: 展开时的背景颜色，当然也是有过度动画的，效果非常好。
③children: 子元素，是一个数组，可以放入多个元素。
④trailing：右侧的箭头，你可以自行替换但是我觉的很少替换，因为谷歌已经表现的很完美了。
⑤initiallyExpanded:初始状态是否展开，为true时，是展开，默认为false，是不展开。

state生命周期

• initSate -didChangeDependencies(依赖关系变化)-build

主框架

• 定义主函数 void main() => runApp(A());
• 定义类 class A extends statefulwidget{ @ovrrider _AState createState
  => _AState();}
• 定义状态类 class _AState extends State{@Widget builder(BuildContext
  Context){return Widget}}

布局类控件

*MaterialApp：的home是Scaffold

按钮类

1.floatingActionButton

• 属性：elevation ：未点击的时候的阴影 hignlightElevation
  ;点击时阴影值，默认 12.0;tooltip FAB： 被长按时显示，也是无障碍功能
• 设置按钮位置： ①形式：floatingActionButtonLocation:
  FloatingActionButtonLocation.centerFloat
  位置：①底部：centerDocked 底部中间； endDocked 底部右侧
  ②上边一点：centerFloat中间偏上 ；endFloat 底部偏上（默认）
• 颜色： ①前景色foregroundColor（按钮文字）

图片

Image

image->StatefulWidget
//加载资源图片(项目添加images文件夹，并添加图片；pubspec.yaml文件内添加图片资源，assets前面必须空两个空格，注意格式)
Image.asset('images/timg.gif'),
//加载网络图片
Image.network('https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec,png')

1
2
3
4
5
6