Flutter常⽤组件和属性总结
1、容器组件
（1）垂直布局
Column：LinearLayout + vertical
（2）⽔平布局
Row：LinearLayout + horizontal
（3）布局⽅向
①mainAxisAlignment: MainAxisAlignment.start
设置主轴⽅向的位置，针对Column指的是Y轴⽅向；针对Row指的是X轴⽅向，通过textDirection来改变起始位置和排列⽅向。
②crossAxisAlignment:
设置交叉轴⽅向的位置，针对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: , //输⼊内容的类型
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:
flutter sdksdk: 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集合。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。