Flutter常用组件和属性总结

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

 

 

 

 

上一篇:better-scroll 实现下拉刷新、上拉加载的那些坑


下一篇:Flutter 实现 App 内更新安装包,kotlin评价