Ensuite, parlez de la réalisation de l'interface principale. La plupart de l'interface principale est implémentée en se référant au code source de l'application UnityConnect (adresse github https://github.com/UnityTech/ConnectAppCN ), vous pouvez la télécharger vous - même si vous en avez besoin.
Dans une application courante, la première interface après la saisie de la plupart des applications est en fait l'interface principale. Si la liste de l'interface principale nécessite une autorisation de connexion, avant de charger la liste de l'interface principale, déterminez s'il existe déjà un cookie pour les informations utilisateur, et s'il n'y a pas de cookie, revenez à l'interface de connexion.
Le jugement de cette pièce peut être exécuté directement dans la méthode initState. Le composant avec état de flutter a son propre cycle de vie comme la classe d'unité. Les composants de base sont l'initialisation initState, le composant de dessin de construction et la destruction de composant d'élimination. Pour d'autres méthodes telles que désactiver et didUpdateWidget, vous pouvez vous référer aux instructions de la documentation officielle du flutter. La première fois que je suis entré dans l'interface principale, j'ai utilisé la méthode initState pour obtenir l'opération PlayerPrefs. Grâce à la fonctionnalité PlayerPrefs de Unity, elle peut être enregistrée tant qu'elle est écrite une fois, et les dernières données écrites peuvent être obtenues après avoir quitté l'application et l'ouvrir à nouveau. Le code d'implémentation est le suivant:
if ("" == PlayerPrefs.GetString("account_session"))
{
Router.navigator.popAndPushNamed(MainNavigatorRoutes.UserLogin);
return;
}Cette account_session correspond à mes données de cache utilisateur, qui seront écrites à chaque fois que je me connecte.
Bien sûr, les données des cookies sont sensibles au temps. Vous n'avez besoin de porter un jugement que lorsque vous lancez une demande de données. Si le serveur renvoie que l'acquisition a expiré ou n'a pas d'autorisation, il passera de force à l'interface de connexion.
La liste d'interface principale que j'ai créée est relativement simple, il n'y a qu'une seule liste, tirez vers le bas pour libérer l'interface d'actualisation automatique, la liste contient des dossiers et des fichiers, le dossier peut être cliqué pour afficher les sous-éléments, faites glisser votre doigt vers la droite ou cliquez sur le bouton bouton de retour pour revenir au niveau précédent, cliquez sur le fichier Vous pouvez afficher les détails du modèle.
La liste de l'interface principale peut être implémentée directement avec ListView. Le code d'implémentation principal est le suivant:
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)
)
));L'interface de liste par défaut peut être considérée comme un dossier parent avec des sous-dossiers et des fichiers en dessous. Lorsque vous cliquez sur un sous-dossier, les dossiers et fichiers petits-enfants sous le sous-dossier seront affichés. Ainsi, la logique d'ouverture d'un dossier peut effectivement être implémentée avec une classe. Chaque fois que vous cliquez sur le dossier, vous pouvez directement pousser une sous-interface sur l'interface du dossier parent. De cette manière, vous pouvez appeler directement navigator.pop lorsque vous revenir à la page précédente. () pour détruire la page actuelle. Le retour à la page précédente peut être déclenché en cliquant sur l'interface, ou en faisant glisser vers la gauche, et le retour à la page précédente avec un balayage à gauche est mis en œuvre en faisant référence à UnityConnect, je n'entrerai donc pas dans les détails ici.
Lorsque vous cliquez sur un dossier pour créer une PageRoute pour pousser une sous-interface, notez que chaque sous-interface doit utiliser new MaterialApp () comme nœud racine de l'interface, sinon si vous utilisez Scaffold ou Container, les éléments de l'interface affichera une dislocation ou déclenchera une série de bugs d'affichage étranges. Le code d'implémentation de l'interface de saut est le suivant
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 logique de l'interface principale est relativement simple, c'est probablement ça :)