Flutter學習筆記——day1

---

本文是使用Android studio中flutter模板項目實驗的
注意：植入FlutterView後頁面會採用沉侵式佈局，如果沒有設置透明狀態欄就會導致頁面被遮擋

一、簡單使用

1、新建activity繼承FlutterActivity

class TwoActivity : FlutterActivity() {

//    private var routeStr = ""
//
//    override fun createFlutterView(context: Context): FlutterView {
//        val matchParent = WindowManager.LayoutParams(-1, -1)
//        val nativeView = this.createFlutterNativeView()
//        val flutterView = FlutterView(this@TwoActivity, null as AttributeSet?, nativeView)
//        flutterView.setInitialRoute(routeStr)
//        flutterView.setLayoutParams(matchParent)
//        this.setContentView(flutterView)
//        return flutterView
//    }

    override fun onCreate(savedInstanceState: Bundle?) {
//        routeStr = "/first_page"  //指定啓動頁面
        super.onCreate(savedInstanceState)
        GeneratedPluginRegistrant.registerWith(this)
    }
}

2、修改AndroidManifest文件

  <application
    android:name="io.flutter.app.FlutterApplication"
    android:icon="@mipmap/ic_launcher"
    android:label="flutter_app">
    ......
    <activity
        android:name=".TwoActivity"
        android:configChanges="orientation|keyboardHidden|keyboard|screenSize|locale|layoutDirection|fontScale|screenLayout|density|uiMode"
        android:hardwareAccelerated="true"
        android:launchMode="singleTop"
        android:theme="@style/Theme.AppCompat"
        android:windowSoftInputMode="adjustResize">
        <meta-data
            android:name="io.flutter.app.android.SplashScreenUntilFirstFrame"
            android:value="true" />
    </activity>
</application>

3、main.dart文件

void main() {
  runApp(FlutterView());
}

class FlutterView extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'FlutterView',
      theme: ThemeData(primarySwatch: Colors.blue),
      home: MyHomePage(),
        routes: <String, WidgetBuilder> {
        //註冊頁面路徑,用於指定啓動
          'first_page': (BuildContext context) => FirstPage(),
          'one_page' : (BuildContext context) => OnePage(),
        }
    );
  }
}

//StatefulWidget 頁面數據可變
class MyHomePage extends StatefulWidget {
 ......
}

//StatelessWidget 頁面數據不可變
class OnePage extends StatelessWidget {
......
}

class FirstPage extends StatelessWidget {
......
}

二、在原生Activity中將Flutter佈局當做View使用

1、新建空白Activity¹（繼承Activity/AppCompatActivity)
2、在AndroidManifest中註冊

   <activity
            android:name=".OneActivity"
            android:configChanges="orientation|keyboardHidden|keyboard|screenSize|locale|layoutDirection|fontScale|screenLayout|density|uiMode"
            android:hardwareAccelerated="true"
            android:launchMode="singleTop"
            android:theme="@style/Theme.AppCompat"
            android:windowSoftInputMode="adjustResize">
            <meta-data
                android:name="io.flutter.app.android.SplashScreenUntilFirstFrame"
                android:value="true" />
        </activity>

3、新建佈局文件activity_one.xml

<LinearLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <io.flutter.view.FlutterView
        android:id="@+id/flutter_view_1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

</LinearLayout>

4、編輯OneActivity中業務邏輯

class OneActivity : Activity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
  
        //確保FlutterMain初始化完成
        FlutterMain.ensureInitializationComplete(applicationContext, null)
        
        setContentView(R.layout.activity_one)  //注意設置佈局的位置
        
        var flutterRunArguments = FlutterRunArguments()
        //綁定路徑
        flutterRunArguments.bundlePath = FlutterMain.findAppBundlePath(applicationContext)
        //獲取入口 main方法
        flutterRunArguments.entrypoint = "main"
        //指定啓動頁面
        //  flutter_view_1.setInitialRoute("one_page")
        //flutterview 運行設置綁定
        flutter_view_1.runFromBundle(flutterRunArguments)
    }

    override fun onPause() {
        super.onPause()
        flutter_view_1.onPause()
    }

    override fun onPostResume() {
        super.onPostResume()
        flutter_view_1.onPostResume()
    }
}

---

1. 新建Activity，build報錯Gradle DSL method not found: '1.3.21()' Possible causes:<ul><li>The project 'android' may be using a version of Gradle that does not contain the method. Open Gradle wrapper file</li><li>The build file may be missing a Gradle plugin. Apply Gradle plugin</li>
   原因：工程bulid.gradle文件中ext.kotlin_version = '1.3.21' '1.2.71'導致的
   處理：修改工程bulid.gradle文件中ext.kotlin_version = '1.3.21' '1.2.71'爲ext.kotlin_version = '1.2.71' ↩︎