Desenvolvimento de aplicativo Unity baseado em UIWidgets (5)

A seguir, fale sobre a realização da interface principal. A maior parte da interface principal é implementada referindo-se ao código-fonte do aplicativo UnityConnect (endereço do github https://github.com/UnityTech/ConnectAppCN ), você mesmo pode fazer o download se precisar.

Em um aplicativo comum, a primeira interface depois que a maioria dos aplicativos são inseridos é, na verdade, a interface principal. Se a lista da interface principal requer permissão de login, antes de carregar a lista da interface principal, determine se já existe um cookie para informações do usuário e, se não houver cookie, volte para a interface de login.

O julgamento desta peça pode ser executado diretamente no método initState. O componente stateful de flutter tem seu próprio ciclo de vida como a classe da unidade. Os básicos são initState-inicialização, componente de desenho de construção e destruição de componente de descarte. Para outros métodos, como deactivate e didUpdateWidget, você pode consultar as instruções na documentação oficial do flutter. A primeira vez que entrei na interface principal, usei o método initState para obter a operação PlayerPrefs. Por causa do recurso PlayerPrefs do Unity, ele pode ser salvo, desde que seja escrito uma vez, e os últimos dados gravados podem ser obtidos após sair do aplicativo e abri-lo novamente. O código de implementação é o seguinte:

            if ("" == PlayerPrefs.GetString("account_session"))
            {
                Router.navigator.popAndPushNamed(MainNavigatorRoutes.UserLogin);
                return;
            }

Esta account_session são meus dados de cache do usuário, que serão gravados toda vez que eu fizer login.

Claro, os dados do cookie são sensíveis ao tempo. Você só precisa fazer um julgamento ao iniciar uma solicitação de dados. Se o servidor retornar que a aquisição expirou ou não tem permissão, ele forçará o salto para a interface de login.

 

A lista de interface principal que fiz é relativamente simples, há apenas uma lista, puxe para baixo para liberar a interface de atualização automática, a lista tem pastas e arquivos, a pasta pode ser clicada para ver os subelementos, deslize para a direita ou clique no botão de retorno para voltar ao nível anterior, clique no arquivo Você pode ver os detalhes do modelo.

A lista da interface principal pode ser implementada diretamente com ListView. O código de implementação principal é o seguinte:

                    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)
                                      )

                            ));

A interface de lista padrão pode ser considerada uma pasta pai com subpastas e arquivos abaixo dela. Quando você clica em uma subpasta, as pastas e arquivos dos netos na subpasta serão exibidos. Portanto, a lógica de abrir uma pasta pode realmente ser implementada com uma classe. Cada vez que você clica na pasta, você pode enviar diretamente uma subinterface na interface da pasta pai. Dessa forma, você pode chamar diretamente navigator.pop quando você retorne à página anterior. () para destruir a página atual. O retorno à página anterior pode ser acionado clicando na interface ou deslizando para a esquerda, e o retorno à página anterior deslizando para a esquerda é implementado referindo-se ao UnityConnect, então não entrarei em detalhes aqui.

Ao clicar em uma pasta para criar um PageRoute para enviar uma subinterface, observe que cada subinterface precisa usar new MaterialApp () como o nó raiz da interface, caso contrário, se você usar Scaffold ou Container, os elementos da interface irá exibir deslocamento ou disparar uma série de bugs de exibição estranhos. O código de implementação da interface de salto é o seguinte

            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; });
            }

A lógica da interface principal é relativamente simples, provavelmente é isso :)