From 99cc2b742112593149dd71c7a7b7a9a6960de88c Mon Sep 17 00:00:00 2001 From: Sun Date: Tue, 1 Jun 2021 23:28:12 +0800 Subject: [PATCH] change homelist UI --- lib/apps/chat/list.dart | 20 +- lib/apps/service/list.dart | 14 +- lib/apps/service/models.dart | 29 +-- lib/pages/home.dart | 370 +++++++++++++++++++---------- lib/provider.dart | 28 +-- lib/widgets/default_home_show.dart | 151 ------------ 6 files changed, 273 insertions(+), 339 deletions(-) delete mode 100644 lib/widgets/default_home_show.dart diff --git a/lib/apps/chat/list.dart b/lib/apps/chat/list.dart index af854ac..35d68d7 100644 --- a/lib/apps/chat/list.dart +++ b/lib/apps/chat/list.dart @@ -23,13 +23,27 @@ class _ChatListState extends State { Widget build(BuildContext context) { final provider = context.watch(); final isDesktop = isDisplayDesktop(context); + final lang = AppLocalizations.of(context); + final color = Theme.of(context).colorScheme; final friends = provider.friends; final chatKeys = provider.orderKeys; return Scaffold( - body: ListView.builder( - itemCount: chatKeys.length, - itemBuilder: (BuildContext ctx, int index) => ListChat(friend: friends[chatKeys[index]]), + appBar: AppBar( + title: Text(lang.contact), + bottom: PreferredSize( + child: Container(color: const Color(0x40ADB0BB), height: 1.0), + preferredSize: Size.fromHeight(1.0) + ), + ), + body: SafeArea( + child: Padding( + padding: const EdgeInsets.symmetric(vertical: 10.0), + child: ListView.builder( + itemCount: chatKeys.length, + itemBuilder: (BuildContext ctx, int index) => ListChat(friend: friends[chatKeys[index]]), + ) + ), ), floatingActionButton: FloatingActionButton( onPressed: () { diff --git a/lib/apps/service/list.dart b/lib/apps/service/list.dart index dc27476..12903ee 100644 --- a/lib/apps/service/list.dart +++ b/lib/apps/service/list.dart @@ -39,7 +39,7 @@ class _ServiceListState extends State { name: params[0], bio: params[1], logo: params[2], - callback: () => v.callback(context, isDesktop, lang), + callback: () => v.callback(), isDesktop: isDesktop, ); }).toList() @@ -70,16 +70,12 @@ class ListInnerService extends StatelessWidget { return GestureDetector( behavior: HitTestBehavior.opaque, onTap: () { - final widgets = this.callback(); - if (widgets != null) { + final widget = this.callback(); + if (widget != null) { if (this.isDesktop) { - Provider.of(context, listen: false).updateActivedWidget(widgets[0], widgets[1], widgets[2]); + Provider.of(context, listen: false).updateActivedWidget(widget); } else { - if (widgets[2] != null) { - Provider.of(context, listen: false).updateActivedWidget(null, widgets[1], widgets[2]); - } else { - Navigator.push(context, MaterialPageRoute(builder: (_) => widgets[0])); - } + Navigator.push(context, MaterialPageRoute(builder: (_) => widget)); } } }, diff --git a/lib/apps/service/models.dart b/lib/apps/service/models.dart index c25f333..3450bdf 100644 --- a/lib/apps/service/models.dart +++ b/lib/apps/service/models.dart @@ -1,14 +1,10 @@ import 'package:flutter/material.dart'; -import 'package:provider/provider.dart'; - import 'package:esse/l10n/localizations.dart'; -import 'package:esse/provider.dart'; import 'package:esse/apps/assistant/page.dart'; import 'package:esse/apps/file/page.dart'; import 'package:esse/apps/group_chat/page.dart'; - enum InnerService { Files, Assistant, @@ -27,31 +23,14 @@ extension InnerServiceExtension on InnerService { } } - void callback(context, isDesktop, lang) { - Widget coreWidget = null; - String listTitle = null; - Widget listHome = null; - + Widget callback() { switch (this) { case InnerService.Files: - listTitle = lang.files; - listHome = FolderList(); - break; + return FolderList(); case InnerService.Assistant: - coreWidget = AssistantDetail(); - break; + return AssistantDetail(); case InnerService.GroupChat: - listTitle = lang.groupChat; - listHome = GroupChatList(); - break; - } - - if (this == InnerService.Assistant) { - Navigator.push(context, MaterialPageRoute(builder: (_) => coreWidget)); - } else { - Provider.of(context, listen: false).updateActivedWidget( - coreWidget, listTitle, listHome - ); + return GroupChatList(); } } } diff --git a/lib/pages/home.dart b/lib/pages/home.dart index 3fa4d55..341446d 100644 --- a/lib/pages/home.dart +++ b/lib/pages/home.dart @@ -22,16 +22,20 @@ import 'package:esse/account.dart'; import 'package:esse/global.dart'; import 'package:esse/options.dart'; import 'package:esse/provider.dart'; +import 'package:esse/session.dart'; import 'package:esse/apps/device/provider.dart'; import 'package:esse/apps/device/page.dart'; import 'package:esse/apps/chat/provider.dart'; import 'package:esse/apps/chat/list.dart'; +import 'package:esse/apps/chat/detail.dart'; import 'package:esse/apps/chat/add.dart'; import 'package:esse/apps/file/page.dart'; import 'package:esse/apps/service/list.dart'; import 'package:esse/apps/service/add.dart'; import 'package:esse/apps/assistant/page.dart'; +import 'package:esse/apps/group_chat/detail.dart'; +import 'package:esse/apps/group_chat/provider.dart'; class HomePage extends StatelessWidget { static GlobalKey _scaffoldKey = new GlobalKey(); @@ -47,22 +51,21 @@ class HomePage extends StatelessWidget { if (isDesktop) { return WillPopScope( - onWillPop: () => - SystemChannels.platform.invokeMethod('SystemNavigator.pop'), - child: Scaffold( - key: _scaffoldKey, - drawer: const DrawerWidget(), - drawerScrimColor: Color(0x26ADB0BB), - body: SafeArea( - child: Row(children: [ - Container( - width: 375.0, - child: HomeList(_scaffoldKey), - ), - SizedBox(width: 20.0), - Expanded(child: context.watch().coreShowWidget), - ])), - )); + onWillPop: () => SystemChannels.platform.invokeMethod('SystemNavigator.pop'), + child: Scaffold( + key: _scaffoldKey, + drawer: const DrawerWidget(), + drawerScrimColor: const Color(0x26ADB0BB), + body: SafeArea( + child: Row( + children: [ + Container(width: 375.0, + child: HomeList(scaffoldKey: _scaffoldKey), + ), + const SizedBox(width: 20.0), + Expanded(child: context.watch().coreShowWidget), + ])), + )); } else { var style; if (isLight) { @@ -72,25 +75,24 @@ class HomePage extends StatelessWidget { } return WillPopScope( - onWillPop: () => - SystemChannels.platform.invokeMethod('SystemNavigator.pop'), - child: Scaffold( - key: _scaffoldKey, - drawer: const DrawerWidget(), - drawerScrimColor: Color(0x26ADB0BB), - body: AnnotatedRegion( - value: style.copyWith(statusBarColor: colorScheme.background), - child: SafeArea( - child: HomeList(_scaffoldKey), - )), - )); + onWillPop: () => SystemChannels.platform.invokeMethod('SystemNavigator.pop'), + child: Scaffold( + key: _scaffoldKey, + drawer: const DrawerWidget(), + drawerScrimColor: const Color(0x26ADB0BB), + body: AnnotatedRegion( + value: style.copyWith(statusBarColor: colorScheme.background), + child: SafeArea( + child: HomeList(scaffoldKey: _scaffoldKey), + )), + )); } } } class HomeList extends StatefulWidget { - final GlobalKey _scaffoldKey; - HomeList(this._scaffoldKey); + final GlobalKey scaffoldKey; + const HomeList({Key key, this.scaffoldKey}) : super(key: key); @override _HomeListState createState() => _HomeListState(); @@ -133,102 +135,93 @@ class _HomeListState extends State { final color = Theme.of(context).colorScheme; final lang = AppLocalizations.of(context); final provider = context.watch(); + final allKeys = provider.topKeys + provider.orderKeys; + final sessions = provider.sessions; - return Padding( - padding: const EdgeInsets.symmetric(vertical: 10.0), - child: Column( - children: [ + return Scaffold( + appBar: AppBar( + leading: IconButton( + icon: const Icon(Icons.menu), + onPressed: () => widget.scaffoldKey.currentState.openDrawer(), + ), + bottom: PreferredSize( + child: Container(color: const Color(0x40ADB0BB), height: 1.0), + preferredSize: Size.fromHeight(1.0) + ), + actions: [ + IconButton( + icon: const Icon(Icons.search), + onPressed: null, + ), Container( - height: 30.0, - padding: const EdgeInsets.symmetric(horizontal: 20.0), - child: Row( - crossAxisAlignment: CrossAxisAlignment.center, - children: [ - GestureDetector( - onTap: widget._scaffoldKey.currentState.openDrawer, - child: Icon( - Icons.menu_rounded, - color: color.primary, - size: 28.0, - ), - ), - Expanded( - child: Center( - child: Text(provider.homeShowTitle, style: TextStyle(fontWeight: FontWeight.bold)), - )), - Icon(Icons.search_rounded, color: color.primary), - const SizedBox(width: 20.0), - Stack( - children: [ - Container( - width: 28.0, - height: 28.0, - child: provider.homeShowTitle == '' - ? PopupMenuButton( - shape: RoundedRectangleBorder( - borderRadius: BorderRadius.circular(15)), - color: const Color(0xFFEDEDED), - child: Icon(Icons.add_circle_outline_rounded, - color: color.primary), - onSelected: (int value) { - if (value == 0) { - _scanQr(isDesktop); - } else if (value == 1) { - final widget = ChatAddPage(); - if (isDesktop) { - provider.updateActivedWidget(widget); - } else { - provider.systemAppFriendAddNew = false; - setState(() {}); - Navigator.push(context, MaterialPageRoute(builder: (_) => widget)); - } - } else if (value == 2) { - showShadowDialog( - context, - Icons.info, - lang.info, - UserInfo( - app: 'add-friend', - id: provider.activedAccount.id, - name: provider.activedAccount.name, - addr: Global.addr) - ); - } - }, - itemBuilder: (context) { - return >[ - _menuItem(0, Icons.qr_code_scanner_rounded, lang.scan), - _menuItem(1, Icons.person_add_rounded, lang.addFriend, - provider.systemAppFriendAddNew), - _menuItem(2, Icons.qr_code_rounded, lang.myQrcode), - ]; - }, - ) - : GestureDetector(onTap: () => provider.updateToHome(), - child: Icon(Icons.home_outlined, color: color.primary))), - if (provider.systemAppFriendAddNew) - Positioned( - top: 0, - right: 0, - child: Container( - width: 8.0, - height: 8.0, - decoration: BoxDecoration( - color: Colors.red, - shape: BoxShape.circle, - ))), - ], + margin: const EdgeInsets.symmetric(horizontal: 20.0), + alignment: Alignment.center, + child: Stack( + children: [ + PopupMenuButton( + shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(15)), + color: const Color(0xFFEDEDED), + child: Icon(Icons.add_circle_outline, color: color.primary), + onSelected: (int value) { + if (value == 0) { + _scanQr(isDesktop); + } else if (value == 1) { + final widget = ChatAddPage(); + provider.systemAppFriendAddNew = false; + if (isDesktop) { + provider.updateActivedWidget(widget); + } else { + setState(() {}); + Navigator.push(context, MaterialPageRoute(builder: (_) => widget)); + } + } else if (value == 2) { + showShadowDialog( + context, + Icons.info, + lang.info, + UserInfo( + app: 'add-friend', + id: provider.activedAccount.id, + name: provider.activedAccount.name, + addr: Global.addr) + ); + } + }, + itemBuilder: (context) { + return >[ + _menuItem(0, Icons.qr_code_scanner_rounded, lang.scan), + _menuItem(1, Icons.person_add_rounded, lang.addFriend, + provider.systemAppFriendAddNew), + _menuItem(2, Icons.qr_code_rounded, lang.myQrcode), + ]; + }, ), + if (provider.systemAppFriendAddNew) + Positioned( + top: 0, + right: 0, + child: Container( + width: 8.0, + height: 8.0, + decoration: BoxDecoration( + color: Colors.red, + shape: BoxShape.circle, + ))), ], ), - ), - const SizedBox(height: 10.0), - const Divider(height: 1.0, color: Color(0x40ADB0BB)), - const SizedBox(height: 5.0), - Expanded( - child: provider.homeShowWidget, ) - ], + ] + ), + body: SafeArea( + child: Padding( + padding: const EdgeInsets.symmetric(vertical: 10.0), + child: ListView.builder( + itemCount: allKeys.length, + itemBuilder: (BuildContext ctx, int index) => _SessionWidget( + session: sessions[allKeys[index]] + ), + ), + ), ), ); } @@ -359,9 +352,15 @@ class DrawerWidget extends StatelessWidget { style: TextStyle(fontSize: 16.0)), onTap: () { Navigator.pop(context); - Provider.of(context, listen: false).updateActivedWidget( - null, lang.contact, ChatList() - ); + final coreWidget = ChatList(); + if (isDesktop) { + Provider.of(context, listen: false).updateActivedWidget( + coreWidget + ); + } else { + Navigator.push(context, MaterialPageRoute(builder: (_) => coreWidget)); + } + }), ListTile( leading: Icon(Icons.grid_view_rounded, color: color.primary), @@ -369,9 +368,14 @@ class DrawerWidget extends StatelessWidget { style: TextStyle(fontSize: 16.0)), onTap: () { Navigator.pop(context); - Provider.of(context, listen: false).updateActivedWidget( - null, lang.groups, ServiceList() - ); + final coreWidget = ServiceList(); + if (isDesktop) { + Provider.of(context, listen: false).updateActivedWidget( + coreWidget + ); + } else { + Navigator.push(context, MaterialPageRoute(builder: (_) => coreWidget)); + } }), const Divider(height: 1.0, color: Color(0x40ADB0BB)), ListTile( @@ -459,6 +463,120 @@ class DrawerWidget extends StatelessWidget { } } +class _SessionWidget extends StatelessWidget { + final Session session; + const _SessionWidget({Key key, this.session}) : super(key: key); + + @override + Widget build(BuildContext context) { + final color = Theme.of(context).colorScheme; + final lang = AppLocalizations.of(context); + final isDesktop = isDisplayDesktop(context); + final params = session.parse(lang); + + return GestureDetector( + behavior: HitTestBehavior.opaque, + onTap: () { + Widget coreWidget = null; + + switch (session.type) { + case SessionType.Chat: + context.read().updateActivedFriend(session.fid); + coreWidget = ChatDetail(); + break; + case SessionType.Group: + context.read().updateActivedGroup(session.fid); + coreWidget = GroupChatDetail(); + break; + case SessionType.Assistant: + coreWidget = AssistantDetail(); + break; + case SessionType.Files: + coreWidget = FolderList(); + break; + } + + context.read().updateActivedSession(session.id); + + if (coreWidget != null) { + if (!isDesktop) { + Navigator.push(context, MaterialPageRoute(builder: (_) => coreWidget)); + } else { + context.read().updateActivedWidget(coreWidget); + } + } + }, + child: Container( + height: 55.0, + child: Row( + children: [ + Container( + width: 45.0, + height: 45.0, + margin: const EdgeInsets.only(left: 20.0, right: 15.0), + child: params[0], + ), + Expanded( + child: Container( + height: 55.0, + child: Column( + mainAxisAlignment: MainAxisAlignment.center, + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + Row( + mainAxisAlignment: MainAxisAlignment.spaceBetween, + children: [ + Expanded( + child: Text(params[1], + maxLines: 1, + overflow: TextOverflow.ellipsis, + style: TextStyle(fontSize: 16.0)) + ), + Container( + margin: const EdgeInsets.only(left: 15.0, right: 20.0), + child: Text(params[3], style: const TextStyle(color: Color(0xFFADB0BB), fontSize: 12.0)), + ) + ]), + const SizedBox(height: 4.0), + Row( + children: [ + Expanded( + child: Row( + crossAxisAlignment: CrossAxisAlignment.center, + children: [ + if (params[4] != null) + Container( + margin: const EdgeInsets.only(right: 6.0), + child: Icon(params[4], size: 16.0, color: Color(0xFFADB0BB)), + ), + Expanded( + child: Text(params[2], + maxLines: 1, + overflow: TextOverflow.ellipsis, + style: const TextStyle(color: Color(0xFFADB0BB), fontSize: 12.0)), + ) + ] + ), + ), + Container(width: 8.0, height: 8.0, + margin: const EdgeInsets.only(left: 15.0, right: 20.0), + decoration: BoxDecoration( + color: session.lastReaded ? color.background : Colors.red, + shape: BoxShape.circle + ), + ), + ]), + ], + ), + ), + ), + ], + ), + ), + ); + } +} + Widget _menuItem(int value, IconData icon, String text, [bool hasNew = false]) { return PopupMenuItem( diff --git a/lib/provider.dart b/lib/provider.dart index 1152293..089ef88 100644 --- a/lib/provider.dart +++ b/lib/provider.dart @@ -7,7 +7,6 @@ import 'package:flutter/material.dart'; import 'package:esse/account.dart'; import 'package:esse/utils/logined_cache.dart'; import 'package:esse/widgets/default_core_show.dart'; -import 'package:esse/widgets/default_home_show.dart'; import 'package:esse/global.dart'; import 'package:esse/rpc.dart'; import 'package:esse/session.dart'; @@ -35,12 +34,6 @@ class AccountProvider extends ChangeNotifier { int actived = 0; Session get activedSession => this.sessions[actived]; - /// left home list sessions widget. - String homeShowTitle = ''; - Widget defaultListShow = DefaultHomeShow(); - Widget currentListShow = null; - Widget get homeShowWidget => this.currentListShow ?? this.defaultListShow; - /// right main screen show session details. Widget coreShowWidget = DefaultCoreShow(); @@ -120,7 +113,6 @@ class AccountProvider extends ChangeNotifier { this.activedAccountId = gid; this.activedAccount.hasNew = false; this.coreShowWidget = DefaultCoreShow(); - this.currentListShow = null; // load sessions. this.sessions.clear(); @@ -141,7 +133,6 @@ class AccountProvider extends ChangeNotifier { logout() { this.accounts.clear(); this.clearActivedAccount(); - this.currentListShow = null; this.sessions.clear(); this.orderKeys.clear(); this.topKeys.clear(); @@ -201,12 +192,6 @@ class AccountProvider extends ChangeNotifier { rpc.send('account-system-info', []); } - updateToHome() { - this.homeShowTitle = ''; - this.currentListShow = null; - notifyListeners(); - } - clearActivedSession(SessionType type) { if (this.activedSession.type == type && this.actived > 0) { rpc.send('session-suspend', [this.actived, this.activedSession.gid, @@ -254,19 +239,12 @@ class AccountProvider extends ChangeNotifier { } } - updateActivedWidget([Widget coreWidget, String title, Widget homeWidget]) { - print("update actived widget"); - if (homeWidget != null && title != null) { - this.homeShowTitle = title; - this.currentListShow = homeWidget; - } - + updateActivedWidget(Widget coreWidget) { if (coreWidget != null) { + print("update actived widget"); this.coreShowWidget = coreWidget; + notifyListeners(); } - - this.systemAppFriendAddNew = false; - notifyListeners(); } // -- callback when receive rpc info. -- // diff --git a/lib/widgets/default_home_show.dart b/lib/widgets/default_home_show.dart deleted file mode 100644 index 63cfdaa..0000000 --- a/lib/widgets/default_home_show.dart +++ /dev/null @@ -1,151 +0,0 @@ -import 'package:flutter/material.dart'; -import 'package:provider/provider.dart'; - -import 'package:esse/l10n/localizations.dart'; -import 'package:esse/utils/adaptive.dart'; -import 'package:esse/widgets/list_system_app.dart'; -import 'package:esse/options.dart'; -import 'package:esse/provider.dart'; -import 'package:esse/session.dart'; - -import 'package:esse/apps/chat/detail.dart'; -import 'package:esse/apps/chat/provider.dart'; -import 'package:esse/apps/group_chat/detail.dart'; -import 'package:esse/apps/group_chat/provider.dart'; -import 'package:esse/apps/assistant/page.dart'; -import 'package:esse/apps/file/page.dart'; - -class DefaultHomeShow extends StatelessWidget { - const DefaultHomeShow({Key key}): super(key: key); - - @override - Widget build(BuildContext context) { - final isDesktop = isDisplayDesktop(context); - final lang = AppLocalizations.of(context); - final provider = context.watch(); - final allKeys = provider.topKeys + provider.orderKeys; - final sessions = provider.sessions; - - return ListView.builder( - itemCount: allKeys.length, - itemBuilder: (BuildContext ctx, int index) => _SessionWidget( - session: sessions[allKeys[index]] - ), - ); - } -} - -class _SessionWidget extends StatelessWidget { - final Session session; - const _SessionWidget({Key key, this.session}) : super(key: key); - - @override - Widget build(BuildContext context) { - final color = Theme.of(context).colorScheme; - final lang = AppLocalizations.of(context); - final isDesktop = isDisplayDesktop(context); - final params = session.parse(lang); - - return GestureDetector( - behavior: HitTestBehavior.opaque, - onTap: () { - String listTitle = ""; - Widget listWidget = null; - Widget coreWidget = null; - - switch (session.type) { - case SessionType.Chat: - context.read().updateActivedFriend(session.fid); - coreWidget = ChatDetail(); - break; - case SessionType.Group: - context.read().updateActivedGroup(session.fid); - coreWidget = GroupChatDetail(); - break; - case SessionType.Assistant: - coreWidget = AssistantDetail(); - break; - case SessionType.Files: - listTitle = lang.files; - listWidget = FolderList(); - break; - } - - context.read().updateActivedSession(session.id); - - if (!isDesktop && coreWidget != null) { - Navigator.push(context, MaterialPageRoute(builder: (_) => coreWidget)); - } else { - context.read().updateActivedWidget(coreWidget, listTitle, listWidget); - } - }, - child: Container( - height: 55.0, - child: Row( - children: [ - Container( - width: 45.0, - height: 45.0, - margin: const EdgeInsets.only(left: 20.0, right: 15.0), - child: params[0], - ), - Expanded( - child: Container( - height: 55.0, - child: Column( - mainAxisAlignment: MainAxisAlignment.center, - crossAxisAlignment: CrossAxisAlignment.start, - children: [ - Row( - mainAxisAlignment: MainAxisAlignment.spaceBetween, - children: [ - Expanded( - child: Text(params[1], - maxLines: 1, - overflow: TextOverflow.ellipsis, - style: TextStyle(fontSize: 16.0)) - ), - Container( - margin: const EdgeInsets.only(left: 15.0, right: 20.0), - child: Text(params[3], style: const TextStyle(color: Color(0xFFADB0BB), fontSize: 12.0)), - ) - ]), - const SizedBox(height: 4.0), - Row( - children: [ - Expanded( - child: Row( - crossAxisAlignment: CrossAxisAlignment.center, - children: [ - if (params[4] != null) - Container( - margin: const EdgeInsets.only(right: 6.0), - child: Icon(params[4], size: 16.0, color: Color(0xFFADB0BB)), - ), - Expanded( - child: Text(params[2], - maxLines: 1, - overflow: TextOverflow.ellipsis, - style: const TextStyle(color: Color(0xFFADB0BB), fontSize: 12.0)), - ) - ] - ), - ), - Container(width: 8.0, height: 8.0, - margin: const EdgeInsets.only(left: 15.0, right: 20.0), - decoration: BoxDecoration( - color: session.lastReaded ? color.background : Colors.red, - shape: BoxShape.circle - ), - ), - ]), - ], - ), - ), - ), - ], - ), - ), - ); - } -}