flutter入门之常见的flutter问题汇总（转）
1. 使用AppBar后如何去掉左邊的返回箭頭。左邊的圖標對應的是leading，源代碼如下（吐槽一下，CSDN暫不支持dart語言）：
Widget leading = widget.leading;
if (leading == null && widget.automaticallyImplyLeading) {
if (hasDrawer) {
leading = IconButton(
icon: const Icon(Icons.menu),
onPressed: _handleDrawerButton,
tooltip: MaterialLocalizations.of(context).openAppDrawerTooltip,
);
} else {
if (canPop)
leading = useCloseButton ? const CloseButton() : const BackButton();
}
}
if (leading != null) {
leading = ConstrainedBox(
constraints: const BoxConstraints.tightFor( _kLeadingWidth),
child: leading,
);
}
修改方式為， leading為null，automaticallyImplyLeading為false：
appBar: AppBar( leading: null, automaticallyImplyLeading: false,
)
2. 使用flutter的canvas做文字繪制的時候用到的api為TextPainter
3. 使用flutter繪制控件的時候想做到控件超出屏幕范圍后自動換行，那么請參考Wrap，可以輕松實現(xiàn)如下的布局：
4. 要實現(xiàn)類似安卓原生ViewPager的UI，請使用 PageView，注意定義自己的 PageController，然后可以利用PageController的jumpToPage（int）實現(xiàn)自定義的Page頁的跳轉(zhuǎn)
5. 要實現(xiàn)類似頂部和底部導航欄，請參考 TabBar，適當?shù)臅r候可以和 AppBar 結(jié)合使用
6.flutter is a SingleTickerProviderStateMixin but multiple tickers were created. 報錯，原因是多個地方調(diào)用setState請求重繪，但是state使用的是SingleTickerProviderStateMixin ，將其改成TickerProviderStateMixin即可。
7. 解決類沖突的問題，比如，我自定義一個Banner.dart類，這個類跟系統(tǒng)的Banner沖突，那么我們可以這樣解決。
import 'package:flutter/material.dart'; import 'package:myproject/Banner.dart' as myproject; //這樣使用我們自己的Banner myproject.Banner _myBanner; //系統(tǒng)的Banner Banner _banner;
8. 解決Android手機布局浸入到狀態(tài)欄的問題，用一個SafeArea 進行包裝即可，如下：
SafeArea(
top: true,
child: MaterialApp(
home: ,
),);
9. 在切換 tabbar 或者 pageview 的時候要保存上一個tab widget 的狀態(tài)，參考AutomaticKeepAliveClientMixin 既可，如下：
//假如PageView有四個子頁面
@override
Widget build(BuildContext context) {
return Scaffold(
body: PageView(
controller: pageController,
children: <Widget>[
ArticlesPage(),
ProjectPage(),
NavigationPage(),
CollectionArticlesPage(),
],
onPageChanged: changePage,
),
bottomNavigationBar: Navigations(_page, changePage));
}
//然后在子Page的State分別實現(xiàn)with AutomaticKeepAliveClientMixin，wantkeepAlive返回true
class ArticlesPageState extends State<ArticlesPage> with AutomaticKeepAliveClientMixin{
@override
bool get wantKeepAlive => true;
}
class ProjectPageState extends State<ProjectPage> with AutomaticKeepAliveClientMixin{
@override
bool get wantKeepAlive => true;
}
class NavigationPageState extends State<NavigationPage> with AutomaticKeepAliveClientMixin{
@override
bool get wantKeepAlive => true;
}
class CollectionArticlesPageState extends State<CollectionArticlesPage> with AutomaticKeepAliveClientMixin{
@override
bool get wantKeepAlive => true;
}
10. Android手機啟動時候白屏的問題解決，android/app/src/main/res/drawable/launch_background.xml中定義了自定義splash的方法：
<?xml version="1.0" encoding="utf-8"?>
<!-- Modify this file to customize your launch splash screen -->
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@android:color/white" />
<!-- You can insert your own image assets here -->
<!-- <item>
<bitmap
android:gravity="center"
android:src="@mipmap/launch_image" />
</item> -->
</layer-list>
將<item>注釋去掉，替換為自己的launcher_image即可。
11. 界面存在輸入框的時候，點擊后軟鍵盤將頁面頂起來導致頁面重繪的問題（Android fitsystem），可以通過將Scaffold的resizeToAvoidBottomPadding屬性設置為false來關閉重繪，如下：
return Scaffold(
resizeToAvoidBottomPadding: false,
);
12. 修改TextFiled的邊界寬度，可以通過decoration的contentPadding屬性進行修改，如下：
return TextField(
decoration: InputDecoration(
contentPadding: EdgeInsets.all(8),
),
);
13. 如果想實現(xiàn)一個布局，在某些條件下顯示，可以采用Offstage 布局，動態(tài)控制其offstage屬性值即可
14. 如果出現(xiàn)彈出輸入法的時候?qū)е翺verflow錯誤，可以將布局鑲嵌到SingleChildScrollView中，比如：
return Scaffold(
body: SingleChildScrollView(
child: Container(
constraints: BoxConstraints(
maxHeight: MediaQuery.of(context).size.height,
maxWidth: MediaQuery.of(context).size.width,
),
),
),
);
15. GridView的item寬高默認是1:1，可以通過修改childAspectRatio的值來進行寬高的修改，該值代表寬：高
16. flutter中繪制虛線，使用path_drawing
17. flutter 中禁用GridView的滾動，可以使用physics屬性，取值為NeverScrollableScrollPhysics()，如下：
GridView.count(
physics: NeverScrollableScrollPhysics(),
);
18. flutter隱藏狀態(tài)欄，使用：
SystemChrome.setEnabledSystemUIOverlays([]);
19. 監(jiān)聽某個widget是否已經(jīng)渲染完成，使用WidgetsBinding，方法是在initstate或者build中注冊回調(diào)，如下：
WidgetsBinding.instance.addPostFrameCallback((callback){
print("complete");
});
20. flutter設置屏幕支持的方向：
以下設置為設置整個項目運行到時候只允許橫屏，如果需要其他方向，可以參考設置。
SystemChrome.setPreferredOrientations([DeviceOrientation.landscapeLeft, DeviceOrientation.landscapeRight]).then((_){
runApp(MyApp());
});
對于IOS來說，可能我們設置只允許橫屏了，但是效果確依舊可以豎屏，記得修改xcode的General--Deployment Info--Device Orientation屬性，自己勾選對應的方向，如下。
設置屏幕顯示方向，由于flutter中有bug，在IOS端可能不生效，需要插件支持，見https://github.com/jadennn/flutter_orientation
21.flutter設置多語言支持的時候發(fā)現(xiàn)在IOS端只顯示英語的bug，是由于xcode中默認沒有添加中文（其他語言類似）的選擇，解決辦法，在Info--Locallzations中選擇需要的語言，如下：
22. flutter中禁止控件復用，可以使用不同的key，比如說，如果我們有一個stateful的控件，在initstate中進行了一些值的初始計算，在頁面中需要展示多個這樣的控件，不想多個控件公用同一套參數(shù)（換句話說，initstate只會在第一次初始化的時候調(diào)用），那么可以設置不同的key。
23. 裁剪圖片的方法：
i
import 'dart:ui' as DartUi;
///根據(jù)src和dst裁剪圖片
static DartUi.Image getCroppedImage(DartUi.Image image, Rect src, Rect dst) {
var pictureRecorder = new DartUi.PictureRecorder();
Canvas canvas = new Canvas(pictureRecorder);
canvas.drawImageRect(image, src, dst, Paint());
return pictureRecorder
.endRecording()
.toImage(dst.width.floor(), dst.height.floor());
}
24. 在不使用BuildContext的情況下進行頁面跳轉(zhuǎn)：
a. 創(chuàng)建一個global的key
static GlobalKey<NavigatorState> gNavigatorKey = new GlobalKey<NavigatorState>();
b. 在MaterialApp初始化的時候使用
return MaterialApp(
navigatorKey: Global.gNavigatorKey,
routes: <String, WidgetBuilder> {
'/login': (BuildContext context) => new LoginPage(),
},
//....代碼省略
c. 需要的地方使用：
Global.gNavigatorKey.currentState.pushNamedAndRemoveUntil('/login',(_) => false);
注意的是這種方法代價比較大，除非特殊情況，否則不建議使用。使用的時候根據(jù)不同的場景調(diào)用不同的push方法
25. IOS卡在閃屏頁的解決方案：
先運行 flutter build ios , 然后再在xcode中archive
作者：Hirabbit_jaden 來源：CSDN
總結(jié)
以上是生活随笔為你收集整理的flutter入门之常见的flutter问题汇总（转）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： azkaban架构介绍
- 下一篇： 戴尔poweredge r730服务器配