Flutter常用组件和属性总结

1、容器组件

（1）垂直布局

Column：LinearLayout + vertical

（2）水平布局

Row：LinearLayout + horizontal

（3）布局方向

①mainAxisAlignment: MainAxisAlignment.start

        设置主轴方向的位置，针对Column指的是Y轴方向；针对Row指的是X轴方向，通过textDirection来改变起始位置和排列方向。

②crossAxisAlignment: CrossAxisAlignment.center

         设置交叉轴方向的位置，针对Column指的是X轴方向，针对Row指的是Y轴方向，通过verticalDirection来改变起始位置及排列方向。

这个和Android差异比较大。

（4）Expanded

        类似于Android中LinearLayout权重或者ConstraintLayoutbu布局中layout_constraintHorizontal_chainStyle属性或者百分比布局类似，用与实现沿着主轴可利用的空间按照一定比例填充剩余空间。

3、文本输入框

TextField：EditText。 

        Row直接包裹TextField会发生异常：BoxConstraints forces an infinite width需要使用Flexible或者Expanded包裹，原因是Row默认有多大给你多大，TextField你给我多大我就多大，和Android中matchParent还不太一样。

Expanded(
  child: TextField(
    maxLines: 1, //最多行数
    keyboardType: TextInputType.text, //输入内容的类型
    decoration: InputDecoration(
        contentPadding: EdgeInsets.all(14),
        fillColor: Colors.white,
        filled: true,
        isCollapsed: true,
        border: OutlineInputBorder(
          borderRadius: BorderRadius.circular(24),
          borderSide: BorderSide(color: ColorTheme.themeColor),
        )),
  ),
),

4、TextField长按输入框出现【剪切/复制/粘贴】的菜单如何设置中文？

在pubspec.yaml 中集成 flutter_localizations：

	dependencies:
	  flutter:
	    sdk: flutter
	  flutter_localizations:
	    sdk: flutter

在MaterialApp 中设置本地化代理和支持的语言类型：

	return MaterialApp(
	  localizationsDelegates: [
	    GlobalMaterialLocalizations.delegate,
	    GlobalWidgetsLocalizations.delegate,
	  ],
	  supportedLocales: [
	    const Locale('zh', 'CN'),
	    const Locale('en', 'US'),
	  ]
	}

5、按钮

（1）RawMaterialButton

•  shape: CircleBorder()设置圆形shape
•  materialTapTargetSize: MaterialTapTargetSize.shrinkWrap是配置组件点击区域大小的属性设置为MaterialTapTargetSize.shrinkWrap时没有padding；设置为MaterialTapTargetSize.padded时有默认的padding。默认是MaterialTapTargetSize.padded。
•  constraints: BoxConstraints()宽高为0。默认有宽度。
•  fillColor：按钮背景颜色。

6、集合转换

final List<Widget> widgetList = tabNameList.map((e) => Tab(text: e)).toList();

将tabNameList转为widgetList集合。