前端学习Flutter笔记(第二章：基本组件使用笔记)

MaterialApp和Scaffold组件

1、MaterialApp是一个Widget，通常作为顶层widget使用

2、Scaffold是布局结构的实现，这个组件提供了显示drawer、snackbar和底部sheet的API

Scaffold有以下几个属性：

appBar：页面顶部的一个appBar

body：主体

drawer：抽屉菜单

3、Container组件，类似与div

alignment：topCenter：顶部剧中对齐；topLeft:顶部左对齐；topCenter、centerLeft；centerRight；bottomCenter；bottomLeft；bottomRight；

decoration:装css样式的地方；BoxDecoration(color\border\width\borderRadius\boxShadow\渐变色)

margin:外边距，EdgeInsets.all(20);EdgeInsets.only(top:20,right:20)

padding:内边距，EdgeInsets.all(20);EdgeInsets.only(top:20,right:20)

transform:

height:数值/double.infinity 相当于100%

width：数值/double.infinity 相当于100%

4、Text组件

textAlign:center\left\right\justfy

textDirection:文本方向 ltr：从左到右 rtl：从右到左

overflow:clip裁剪；fade渐隐；ellipsis省略号

textScaleFactor:文字显示缩放

maxLines：最大行数

style:样式

5、图片

Image.asset:本地图片

Image.asset(
       'assets/images/common/logo.png',
       height: 40,
       fit: BoxFit.cover,
     ),

Image.network:在线图片

Image.network(
               'https://fuss10.elemecdn.com/d/e6/c4d93a3805b3ce3f323f7974e6f78jpeg.jpeg',
               width: 130,
               height: 180,
               fit: BoxFit.cover,
    ),

圆形图片有两种方式：

1、借用Container的decoration，设置背景图image:DecorationImage(image:Image.netowork(‘xxx’),fit:BoxFit.cover)，并且borderRaius为圆形

2、ClipRRect组件，设置borderRaius。

3、ClipOval组件，指定等宽等高。此方式更为简单！

6、图标组件以及如何使用阿里图标库

内置：Icon(Icons.home,size:40,color:Colors.red);

7、列表组件 就可以使页面溢出上下滑动了

ListView

ListTitle,相当于li

8、Divider

分割线 相当于

---

9、GirdView 网格布局

1、可以通过GridView.count 实现网格布局
2、可以通过GridView.extent 实现网格布局
3、通过GridView.builder实现动态网格布局

scrollDirection：Axis 滚动方法

padding:内边距

resolve:bool 组件反向排序

crossAxisSpacing:水平间距

mainAxisSpacing:垂直间距

crossAxisCount:一行多少个 仅在GridView.count中使用

maxCrossAxisExtent:横轴子元素的最大长度

childAspecRatio：子组件的宽高比例

children:[]

10、Row

children:[]

mainAxisAlignment:主轴排列 start center end 相当于justify-content

crossAxisAlignment:纵轴，相当于align-items

11、Column

12、Flex布局 Expanded

例如：一行内左边占三分之一 右边占三分之二

Row(
	children:[
		Expandes(
			flex:1,
			child:xxx
		),
		Expandes(
			flex:2,
			child:xxx
		),
	]
)
或者
Flex(
	direction:Axis.vertical,
	children:[
		Expandes(
			flex:1,
			child:xxx
		),
		Expandes(
			flex:2,
			child:xxx
		),
	]
)

13、padding和Padding

padding:EdgeInsets.all(20); //和四周等距20

还可以使用Padding组件，里面也是padding:EdgeInsets.all(20); 。 当然没有必要

14、Stack 堆叠组件

就会出现都叠加起来，一层一层的叠加，默认在左上角开始叠加

15、Postioned

定位组件，就会根据父元素进行定位

top、left、right、bottom

16、获取屏幕宽高数据

final size = MediaQuery.of(context).size //写在build里面

可以用于例如Postioned组件的宽度 width:size;

17、AspectRatio 比如16：9的盒子装一个16：9的图片

控制子元素的宽高比

18、CircleAvatar

头像组件

CircleAvatar(
                 backgroundImage: NetworkImage(
                     'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg'),
               ),

19、Card组件 卡片

margin:

child:

shadowColor:

clipBehavior:内容溢出的裁剪形式，Clip.none :不裁剪；Clip.hardEdge:

Shape:阴影效果

color：背景颜色

20、ClipVal 可以实现圆形的盒子。或者用Container也可以实现圆形盒子

例如：

ClipOval(
	child:Image.network('https://xxxxx',fit:BoxFit.cover,)
)

21、CircleAvatar 圆角头像组件

CircleAvatar(
           backgroundColor: Colors.red,
           radius: 40,
           child: CircleAvatar(
             radius: 30, //圆角 半径
             backgroundImage: NetworkImage(
                 'https://fuss10.elemecdn.com/2/11/6535bcfb26e4c79b48ddde44f4b6fjpeg.jpeg'),
           ),
         ))

22、按钮组件

ElevateButton、TextButton、OutlineButton、IconButton、带图标的按钮

ElevatedButton(
             onPressed: () {
               print('点击');
             },
             onLongPress: () {
               print('长按');
             },
             child: Text('普通按钮'))
             
TextButton(
             onPressed: () {
               print('点击');
             },
             onLongPress: () {
               print('长按');
             },
             child: Text('文本按钮'))
             
OutlinedButton(
             onPressed: () {
               print('点击');
             },
             onLongPress: null,
             child: Text('边框按钮'))
             
             
IconButton(
           icon: Icon(Icons.home),
           onPressed: () {
             print('点击');
           },
         )
         
一下是带图标的按钮
ElevatedButton.icon(
             onPressed: null, icon: Icon(Icons.home), label: Text('带图标按钮'))

自定义按钮样式
ElevatedButton(
             style: ButtonStyle(
               backgroundColor: MaterialStateProperty.all(
                   Color.fromRGBO(154, 165, 60, 0.8)),
               foregroundColor: MaterialStateProperty.all(Colors.red),
             ),
             onPressed: () {
               print('点击');
             },
             onLongPress: () {
               print('长按');
             },
             child: Text('普通按钮'))
       ],
   
按钮宽高
可以套一个sizeBox，并设置宽高，按钮就会根据这个盒子的宽高了

23、Wrap组件 可以实现流布局 其效果和Row类似,但是row溢出会告警，wrap会自动换行

Wrap(
   spacing: 10, //水平间距
   runSpacing: 10, //垂直间距
   children: [
     MyButton(buttonText: '第一个', myFunc: () {}),
     MyButton(buttonText: '222', myFunc: () {}),
     MyButton(buttonText: '333', myFunc: () {}),
     MyButton(buttonText: '444', myFunc: () {}),
     MyButton(buttonText: '555', myFunc: () {}),
     MyButton(buttonText: '666', myFunc: () {}),
     MyButton(buttonText: '777', myFunc: () {}),
   ],
 )

TODO:路由管理、接口请求、接口请求头设置、状态管理（类似于VUEX）、上拉加载