A continuación, hable sobre la realización de la interfaz principal. La mayor parte de la interfaz principal se implementa haciendo referencia al código fuente de la aplicación UnityConnect (dirección github https://github.com/UnityTech/ConnectAppCN ), puede descargarlo usted mismo si lo necesita.
En una aplicación común, la primera interfaz después de ingresar la mayoría de las aplicaciones es en realidad la interfaz principal. Si la lista de la interfaz principal requiere permiso de inicio de sesión, antes de cargar la lista de la interfaz principal, determine si ya existe una cookie para la información del usuario y, si no hay ninguna cookie, vuelva a la interfaz de inicio de sesión.
El juicio de esta pieza se puede ejecutar directamente en el método initState. El componente con estado de flutter tiene su propio ciclo de vida como la clase de unidad. Los básicos son initState-initialization, build-drawing component y dispose-component destrucción. Para otros métodos como deactivate y didUpdateWidget, puedes consultar las instrucciones en la documentación oficial de flutter. La primera vez que entré a la interfaz principal, utilicé el método initState para obtener la operación PlayerPrefs. Debido a la función PlayerPrefs de Unity, se puede guardar siempre que se escriba una vez, y los últimos datos escritos se pueden obtener después de salir del aplicación y abrirla de nuevo. El código de implementación es el siguiente:
if ("" == PlayerPrefs.GetString("account_session"))
{
Router.navigator.popAndPushNamed(MainNavigatorRoutes.UserLogin);
return;
}Esta account_session son los datos de mi caché de usuario, que se escribirán cada vez que inicie sesión.
Por supuesto, los datos de las cookies son sensibles al tiempo. Solo necesita emitir un juicio cuando inicie una solicitud de datos. Si el servidor devuelve que la adquisición ha agotado el tiempo de espera o no tiene permiso, saltará a la fuerza a la interfaz de inicio de sesión.
La lista de la interfaz principal que hice es relativamente simple, solo hay una lista, desplácese hacia abajo para liberar la interfaz de actualización automática, la lista tiene carpetas y archivos, se puede hacer clic en la carpeta para ver los subelementos, deslizar hacia la derecha o hacer clic en botón volver para volver al nivel anterior, haga clic en el archivo Puede ver los detalles del modelo.
La lista de la interfaz principal se puede implementar directamente con ListView. El código de implementación principal es el siguiente:
return new Expanded(
flex: 1,
child: new Container(
color: Color.fromARGB(255, 248, 248, 248),
//width:Screen.width,
height: MediaQuery.of(context).size.height,
child: new CustomListView(//CustomListView是自定义的一个ListView组件
controller: _refreshController,//刷新监听控制器
enablePullDown: true,
enablePullUp: false,
onRefresh: GetProjectDataByCondition,
itemCount: projectDatas.Count,//当前列表的item数目
hasBottomMargin: true,
itemBuilder:
((Context, index) =>
{
//封装每个item的操作
return GetSceneItems(context, index);
}),
// headerWidget: CustomListViewConstant.defaultHeaderWidget,
footerWidget: new EndView(hasBottomMargin: true)
)
));La interfaz de lista predeterminada se puede considerar como una carpeta principal con subcarpetas y archivos debajo. Al hacer clic en una subcarpeta, se mostrarán las carpetas y los archivos de los nietos en la subcarpeta. Entonces, la lógica de abrir una carpeta se puede implementar con una clase. Cada vez que hace clic en la carpeta, puede presionar directamente una subinterfaz en la interfaz de la carpeta principal. De esta manera, puede llamar directamente a navigator.pop cuando volver a la página anterior. () para destruir la página actual. El regreso a la página anterior se puede activar haciendo clic en la interfaz o deslizando el dedo hacia la izquierda, y el regreso a la página anterior con el deslizamiento hacia la izquierda se implementa haciendo referencia a UnityConnect, por lo que no entraré en detalles aquí.
Al hacer clic en una carpeta para crear un PageRoute para enviar una subinterfaz, tenga en cuenta que cada subinterfaz necesita usar new MaterialApp () como el nodo raíz de la interfaz. De lo contrario, si se usa Scaffold o Container, los elementos del La interfaz mostrará una dislocación o activará una serie de errores de visualización extraños. El código de implementación de la interfaz de salto es el siguiente
if (model.is_dir == "1")//文件夹
{
StaticData.isInit = false;
var callBack = Router.navigator.push(new CustomPageRoute(
builder:buildContext=>
new MaterialApp(//根节点一定是MaterialApp
home: new Scaffold(
backgroundColor: Color.fromARGB(255, 248, 248, 248),
body:new MainListPage(model)))//MainListPage是主界面类，这里直接用来创建子文件夹界面
));
//callBack.Then((ob)=> { models = (ProjectListModels)ob; });
}La lógica de la interfaz principal es relativamente simple, probablemente sea eso :)