学习了一段时间flutte,想在项目里边实际操作一下,但是目前flutter毕竟还没有那么成熟,还有不少
技术上的坑需要填,另外同事也都是学习的状态,所以目前和原生结合,部分页面用flutter是比较合适
的方案.
已有项目和新建项目是一样的,演示方便就新建个项目,原生和Flutter工具都用AndroidStudio,大概就是下边几个步骤:
1. 新建Android项目
2. 新建Flutter Module项目
3. 导入Flutter module,同步项目
4. 修改代码,实现简单跳转
1. 新建Android项目
打开Android Studio, 新建一个普通的Android项目,一路Next,然后Finish,完成后进入下边的界面
2. 新建Flutter Module项目
选择File-> New-> New Flutter Project,选择Flutter Module,目录应该是放哪都可以,我放在了和Android项目平级的位置,一路Next.(如果创建flutter项目卡着不动,可以选择使用命令行创建)
3. 添加module依赖
下一步添加flutter module依赖,右键app打开module 设置,点击加号,选择import flutter module,选择刚才创建的flutter module. 注意:别忘了同步项目 在File->Sync Project With Gradle Files
同步完之后的项目结构
4. 修改代码,简单实现原生到flutter的跳转
MainActiviy作为宿主Activity,新建一个MainFragment,从MainFragment到FlutterFragment的跳转
*. MainActivity 如下
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<FrameLayout
android:id="@+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</android.support.constraint.ConstraintLayout>
----------------------------------------------------------
public class MainActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
getSupportFragmentManager().beginTransaction()
.replace(R.id.container, new MainFragment())
.commit();
}
}
*. MainFragment 如下
<android.support.v7.widget.Toolbar
android:layout_width="match_parent"
android:layout_height="?actionBarSize"
android:background="@color/colorPrimary"
app:title="@string/app_name"
app:titleTextColor="@android:color/white" />
<TextView
android:id="@+id/tv_go_flutter"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:layout_gravity="center_horizontal"
android:layout_marginTop="64dp"
android:background="@color/colorPrimary"
android:paddingLeft="24dp"
android:paddingTop="16dp"
android:paddingRight="24dp"
android:paddingBottom="16dp"
android:text="Go Flutter"
android:textColor="@android:color/white" />
</LinearLayout>
----------------------------------------------------
public class MainFragment extends Fragment {
@Nullable
@Override
public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
View rootView = inflater.inflate(R.layout.fragment_main, container, false);
rootView.findViewById(R.id.tv_go_flutter).setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
getActivity().getSupportFragmentManager().beginTransaction()
.add(R.id.container, Flutter.createFragment("/"))
.addToBackStack("flutter")
.commit();
}
});
return rootView;
}
}
原生端就只有一个按钮
点击按钮,跳转效果如下:
Done.
总结: 以上只是实现了Android原生集成Flutter,以及简单跳转.后续还有很多问题, 比如,两端的主题色需要统一,Flutter Appbar后退按钮显示,根据Route跳转到Flutter 指定的界面等.在具体使用中还有很多小坑需要趟.
参考资料: 官方文档
