导航
导航

flutter实用技巧汇总

bottomNavigationBar TabBar Navigator等
使用这些控件时,可能出现跳转后bottomNavigationBar还保留在底部的情况。
截止本文发布为止,目前Flutter开发工具还是有一些莫名其妙的问题的。如果你一直用iOS模拟器调试,发现有些奇葩问题怎么改代码都没效果,不妨切换成android模拟器试试,反之亦然。

获取设备宽高

double width = MediaQuery.of(context).size.width;
double height = MediaQuery.of(context).size.height;

标题栏沉浸式

void main() {
runApp(App());
if (Platform.isAndroid) {
SystemUiOverlayStyle systemUiOverlayStyle = SystemUiOverlayStyle(statusBarColor: Colors.transparent);
SystemChrome.setSystemUIOverlayStyle(systemUiOverlayStyle);
}
}

AppBar标题居中和去掉AppBar下侧阴影

Widget _tabbar(BuildContext context) {
return AppBar(
...
centerTitle: true, // 标题居中
elevation: 0.0, // 去掉appbar下面的阴影
);
}

有状态组件一定要使用createState

class HomeScreen extends StatefulWidget {
const HomeScreen();

@override
_HomeScreenState createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> with SingleTickerProviderStateMixin {
// 使用TickerProvider 记得加 with SingleTickerProviderStateMixin 不然会报错
}

使用ios的动画交互 和 MaterialApp 主题颜色配置不生效的问题
检查是否存在子级MaterialApp。如果有子级MaterialApp请删除,保证全局只有一个MaterialApp,theme就会生效

class App extends StatelessWidget {
final store = createStore();
// App();

@override
Widget build(BuildContext context) {
return StoreProvider<AppState>(
store: createStore(),
child: MaterialApp(
theme: ThemeData(
platform: TargetPlatform.iOS, // 使用ios的界面动画方式
primaryColor: Colors.red, // 应用主要部分的背景颜色(工具栏,标签栏等)
accentColor: Colors.red, // 前景色:旋钮,文本,过度滚动边缘效果等
),
routes: <String, WidgetBuilder>{
'/': (BuildContext context) => HomeScreen(),
},
),
);
}
}

async和await

//HTTP的get请求返回值为Future<String>类型,即其返回值未来是一个String类型的值
getData() async { //async关键字声明该函数内部有代码需要延迟执行
return await http.get(Uri.encodeFull(url), headers: {"Accept": "application/json"}); //await关键字声明运算为延迟执行,然后return运算结果
}

Future

 funA(){
...set an important variable... //设置变量
}

funB(){
...use the important variable... //使用变量
}
main(){
new Future.then(funA()).then(funB()); // 明确表现出了后者依赖前者设置的变量值

new Future.then(funA()).then((_) {new Future(funB())}); //还可以这样用

//链式调用,捕获异常
new Future.then(funA(),onError: (e) { handleError(e); }).then(funB(),onError: (e) { handleError(e); })
}

参考资料:
https://www.shifeng1993.com/2018/07/12/flutter_dev/
https://segmentfault.com/a/1190000014396421

打赏
扫一扫,提供动力能源
  • 微信扫一扫
  • 支付宝扫一扫