Flutter常用组件和属性总结

Posted 2021-06-21 一杯清泉

1、垂直布局

Column：LinearLayout + vertical

2、水平布局

Row：LinearLayout + horizontal

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集合。