Flutter 12 个小技巧
你好，敌人... 心愿你做得很好！明天的我要分享一些疾速提醒和技巧在 Flutter ，这将使你的工作容易！！
1. 应用 Flutter 打消键盘 Dismiss Keyboard
要勾销键盘，咱们必须应用手势检测器将焦点集中在不同的节点上，如上面的示例所示。
2. 应用 Flutter 创立一个圆形图像
ClipOval 小部件以椭圆形或圆形形态剪裁子小部件。咱们能够通过更改宽度和高度来从新设置子窗口小部件的形态。如果宽度和高度相等，则形态为圆形。如果给定的宽度和高度不同，那么形态将为椭圆形。让咱们通过一个例子来了解这一点: ー
3. 防止应用 const 构造函数从新构建部件
如果要避免不必要的小部件从新生成，请始终应用常量构造函数。在上面的代码中，即便调用 setState，BoxDecoring 的实例也将放弃不变。
4. 不通明的 RGB 或十六进制色彩
在 Flutter 中，要应用 alpha 从 RGB 创立色彩，请应用:
Container( color: Color.fromRGBO(0, 0, 0, 0.5),),应用十六进制色彩:
Container( color: Color(0xFF4286f4),),//0xFF -> the opacity (FF for opaque)//4286f4 -> the hex-color16 进制管制透明度:
Container( color: Color(0xFF4286f4).withOpacity(0.5),),// or change the "FF" value// 100% — FF// 95% — F2// 90% — E6// 85% — D9// 80% — CC// 75% — BF// 70% — B3// 65% — A6// 60% — 99// 55% — 8C// 50% — 80// 45% — 73// 40% — 66// 35% — 59// 30% — 4D// 25% — 40// 20% — 33// 15% — 26// 10% — 1A// 5% — 0D// 0% — 005. 在 Column 小部件中增加 ListView 或 GridView ー
如果要在 Column 小部件中应用 ListView 或 GridView，您将看到以下谬误:
flutter: ══╡ EXCEPTION CAUGHT BY RENDERING LIBRARY ╞═════════════════════════════════════════════════════════flutter: The following assertion was thrown during performResize():flutter: Vertical viewport was given unbounded height.flutter: Viewports expand in the scrolling direction to fill their container.In this case, a verticalflutter: viewport was given an unlimited amount of vertical space in which to expand. This situationflutter: typically happens when a scrollable widget is nested inside another scrollable widget.flutter: If this widget is always nested in a scrollable widget there is no need to use a viewport becauseflutter: there will always be enough vertical space for the children. In this case, consider using a Columnflutter: instead. Otherwise, consider using the "shrinkWrap" property (or a ShrinkWrappingViewport) to sizeflutter: the height of the viewport to the sum of the heights of its children.在我第一个星期的情绪稳定中，我常常面对这个问题。如果你也在应用 listView 和 GridView (日文)这一栏翻译的时候遇到了同样的问题，那么试试这个..。
Add these two lines inside The ListView or GridView --shrinkWrap: true,physics: NeverScrollablePhysics(),6. 如何在 Flutter 中向 Widget 增加圆角边框
想要在 Flutter 显示圆形边框的小部件吗？只有用 DecoratedBox 包装你的小部件，而后像这样给它一个装璜:
DecoratedBox( decoration: BoxDecoration( color: Colors.blue, borderRadius: const borderRadius: BorderRadius.circular(16), ), child: someWidget, ),7. 在应用程序的所有晋升按钮上重用雷同的款式
ElevatedButton 在 Flutter 取代了老的 RaisedButton 小部件，它的 API 也不同
ElevatedButton( style: ElevatedButton.styleFrom( backgroundColor: Colors.black, // background (button) color foregroundColor: Colors.white, // foreground (text) color ), onPressed: () => print('pressed'), child: const Text('Add to Cart'), ),想要在你的应用程序中的所有晋升按钮上重用雷同的款式吗？
只需将 ThemeData.elevatedButtonTheme 设置为 MaterialApp 程序:
MaterialApp( theme: ThemeData( elevatedButtonTheme: ElevatedButtonThemeData( style: ElevatedButton.styleFrom( backgroundColor: Colors.black, // background (button) color foregroundColor: Colors.white, // foreground (text) color ), ), ),),8. Flutter 中的平台特定代码
您能够应用 dart: io 库编写特定于平台的代码。
import 'dart:io' show Platform;if (Platform.isIOS) { doSomethingforIOS();}if (Platform.isAndroid) { doSomethingforAndroid();}9. TextField 的游标是可定制的
咱们能够依据须要自定义 TextField 的光标:
TextField( cursorColor: Colors.purple, cursorRadius: Radius.circular(8.0), cursorWidth: 8.0,),10. 按下按钮时扭转文本色彩
是的，咱们能做到
TextButton( onPressed: () {}, style: ButtonStyle( foregroundColor: MaterialStateProperty.resolveWith<Color>((Set<MaterialState> states) { if (states.contains(MaterialState.pressed)) return Colors.pink; return null; // Defer to the widget's default. }), ), child: Text('Change My Color',style: TextStyle(fontSize: 30), ), ),11. Floating app bar —
SliverAppBar 是一个提供浮动应用程序栏的小部件
SliverAppBar( pinned: true, snap: true, floating: true, expandedHeight: 160.0, flexibleSpace: const FlexibleSpaceBar( title: Text('SliverAppBar'), background: FlutterLogo(), ),),11. BackdropFilter in flutter
咱们能够应用 BackdroFilter 小部件来实现这种成果。
https://api.flutter.dev/flutt...
import 'dart:ui'; //we need to import this package firstimport 'package:flutter/material.dart';void main() { runApp(MaterialApp(home: FrostedDemo()));}class FrostedDemo extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold( body: Stack( children: <Widget>[ ConstrainedBox( constraints: const BoxConstraints.expand(), child: FlutterLogo()), Center( child: ClipRect( child: BackdropFilter( filter: ImageFilter.blur(sigmaX: 10.0, sigmaY: 10.0), child: Container( width: 200.0, height: 200.0, decoration: BoxDecoration( color: Colors.grey.shade200.withOpacity(0.5)), child: Center( child: Text('Frosted', style: Theme.of(context).textTheme.display3), ), ), ), ), ), ], ), ); }}12. Flutter 中的旋转盒子
RotatedBox 小部件用于按四分之一圈的整数旋转它的子元素。它用于将其子窗口小部件定向为程度或垂直方向。此外，它十分轻量级，可用于设计各种用户界面，因为它在应用程序的设计方面为用户提供了灵活性。
RotatedBox( quarterTurns: 3, child: const Text('Hello World!'),),© 猫哥
- wx:ducafecat
- wiki.ducafecat.tech
本文由mdnice多平台公布