mirror of
https://github.com/haorendashu/nowser.git
synced 2025-12-17 18:04:18 +01:00
me page ui
This commit is contained in:
41
lib/component/app/app_type_component.dart
Normal file
41
lib/component/app/app_type_component.dart
Normal file
@@ -0,0 +1,41 @@
|
||||
import 'package:flutter/material.dart';
|
||||
|
||||
import '../../const/base.dart';
|
||||
|
||||
class AppTypeComponent extends StatefulWidget {
|
||||
int appType;
|
||||
|
||||
AppTypeComponent(this.appType);
|
||||
|
||||
@override
|
||||
State<StatefulWidget> createState() {
|
||||
return _AppTypeComponent();
|
||||
}
|
||||
}
|
||||
|
||||
class _AppTypeComponent extends State<AppTypeComponent> {
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
var themeData = Theme.of(context);
|
||||
|
||||
return Container(
|
||||
decoration: BoxDecoration(
|
||||
color: themeData.hintColor.withOpacity(0.3),
|
||||
borderRadius: BorderRadius.circular(8),
|
||||
),
|
||||
padding: EdgeInsets.only(
|
||||
left: Base.BASE_PADDING_HALF,
|
||||
right: Base.BASE_PADDING_HALF,
|
||||
top: 4,
|
||||
bottom: 4,
|
||||
),
|
||||
child: Text(
|
||||
"WEB",
|
||||
style: TextStyle(
|
||||
fontSize: themeData.textTheme.bodySmall!.fontSize,
|
||||
color: themeData.hintColor,
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -1,6 +1,9 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:nowser/const/app_type.dart';
|
||||
import 'package:nowser/const/base.dart';
|
||||
|
||||
import '../app/app_type_component.dart';
|
||||
|
||||
class AuthAppInfoComponent extends StatefulWidget {
|
||||
@override
|
||||
State<StatefulWidget> createState() {
|
||||
@@ -50,25 +53,7 @@ class _AuthAppInfoComponent extends State<AuthAppInfoComponent> {
|
||||
),
|
||||
Positioned(
|
||||
right: 16,
|
||||
child: Container(
|
||||
decoration: BoxDecoration(
|
||||
color: themeData.hintColor.withOpacity(0.3),
|
||||
borderRadius: BorderRadius.circular(8),
|
||||
),
|
||||
padding: EdgeInsets.only(
|
||||
left: Base.BASE_PADDING_HALF,
|
||||
right: Base.BASE_PADDING_HALF,
|
||||
top: 4,
|
||||
bottom: 4,
|
||||
),
|
||||
child: Text(
|
||||
"WEB",
|
||||
style: TextStyle(
|
||||
fontSize: themeData.textTheme.bodySmall!.fontSize,
|
||||
color: themeData.hintColor,
|
||||
),
|
||||
),
|
||||
),
|
||||
child: AppTypeComponent(AppType.WEB),
|
||||
)
|
||||
],
|
||||
);
|
||||
|
||||
33
lib/component/user_pic_component.dart
Normal file
33
lib/component/user_pic_component.dart
Normal file
@@ -0,0 +1,33 @@
|
||||
import 'package:flutter/material.dart';
|
||||
|
||||
class UserPicComponent extends StatefulWidget {
|
||||
double width;
|
||||
|
||||
UserPicComponent({required this.width});
|
||||
|
||||
@override
|
||||
State<StatefulWidget> createState() {
|
||||
return _UserPicComponent();
|
||||
}
|
||||
}
|
||||
|
||||
class _UserPicComponent extends State<UserPicComponent> {
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
Widget innerWidget = Icon(
|
||||
Icons.account_circle,
|
||||
size: widget.width,
|
||||
);
|
||||
|
||||
return Container(
|
||||
width: widget.width,
|
||||
height: widget.width,
|
||||
clipBehavior: Clip.hardEdge,
|
||||
alignment: Alignment.center,
|
||||
decoration: BoxDecoration(
|
||||
borderRadius: BorderRadius.circular(widget.width / 2),
|
||||
),
|
||||
child: innerWidget,
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -63,7 +63,8 @@ class _WebHomeComponent extends State<WebHomeComponent> {
|
||||
}),
|
||||
wrapBottomBtn(const Icon(Icons.space_dashboard)),
|
||||
wrapBottomBtn(const Icon(Icons.segment), onTap: () {
|
||||
AuthDialog.show(context);
|
||||
// AuthDialog.show(context);
|
||||
RouterUtil.router(context, RouterPath.ME);
|
||||
}),
|
||||
],
|
||||
),
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
class RouterPath {
|
||||
static const String INDEX = "/";
|
||||
static const String WEB_TABS = "/webTabs";
|
||||
static const String ME = "/me";
|
||||
}
|
||||
|
||||
@@ -11,6 +11,7 @@ import 'package:nowser/data/db.dart';
|
||||
import 'package:nowser/provider/key_provider.dart';
|
||||
import 'package:nowser/provider/web_provider.dart';
|
||||
import 'package:nowser/router/index/index_router.dart';
|
||||
import 'package:nowser/router/me/me_router.dart';
|
||||
import 'package:nowser/router/web_tabs_select/web_tabs_select_router.dart';
|
||||
import 'package:provider/provider.dart';
|
||||
import 'package:receive_intent/receive_intent.dart' as receiveIntent;
|
||||
@@ -75,6 +76,7 @@ class _MyApp extends State<MyApp> {
|
||||
routes = {
|
||||
RouterPath.INDEX: (context) => IndexRouter(),
|
||||
RouterPath.WEB_TABS: (context) => WebTabsSelectRouter(),
|
||||
RouterPath.ME: (context) => MeRouter(),
|
||||
};
|
||||
|
||||
return MultiProvider(
|
||||
|
||||
206
lib/router/me/me_router.dart
Normal file
206
lib/router/me/me_router.dart
Normal file
@@ -0,0 +1,206 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:nowser/component/user_pic_component.dart';
|
||||
import 'package:nowser/const/base.dart';
|
||||
import 'package:nowser/router/me/me_router_log_item_component.dart';
|
||||
import 'package:nowser/router/me/me_router_web_item_component.dart';
|
||||
|
||||
import 'me_router_app_item_component.dart';
|
||||
|
||||
class MeRouter extends StatefulWidget {
|
||||
@override
|
||||
State<StatefulWidget> createState() {
|
||||
return _MeRouter();
|
||||
}
|
||||
}
|
||||
|
||||
class _MeRouter extends State<MeRouter> {
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
var mediaQueryData = MediaQuery.of(context);
|
||||
var themeData = Theme.of(context);
|
||||
|
||||
var listWidgetMargin = EdgeInsets.only(
|
||||
top: Base.BASE_PADDING,
|
||||
bottom: Base.BASE_PADDING,
|
||||
);
|
||||
|
||||
List<Widget> defaultUserWidgets = [];
|
||||
defaultUserWidgets.add(Container(
|
||||
margin: EdgeInsets.only(
|
||||
left: Base.BASE_PADDING,
|
||||
),
|
||||
child: UserPicComponent(width: 50),
|
||||
));
|
||||
defaultUserWidgets.add(Container(
|
||||
margin: EdgeInsets.only(left: Base.BASE_PADDING),
|
||||
child: Text("Click and Login"),
|
||||
));
|
||||
defaultUserWidgets.add(Expanded(child: Container()));
|
||||
defaultUserWidgets.add(Container(
|
||||
margin: EdgeInsets.only(right: Base.BASE_PADDING),
|
||||
child: Icon(Icons.settings),
|
||||
));
|
||||
var defaultUserWidget = Container(
|
||||
margin: const EdgeInsets.only(
|
||||
top: Base.BASE_PADDING,
|
||||
),
|
||||
child: Row(
|
||||
children: defaultUserWidgets,
|
||||
),
|
||||
);
|
||||
|
||||
List<Widget> memberList = [];
|
||||
for (var i = 0; i < 3; i++) {
|
||||
memberList.add(Container(
|
||||
margin: EdgeInsets.only(left: Base.BASE_PADDING_HALF),
|
||||
child: UserPicComponent(width: 30),
|
||||
));
|
||||
}
|
||||
memberList.add(Expanded(child: Container()));
|
||||
memberList.add(GestureDetector(
|
||||
child: Icon(Icons.chevron_right),
|
||||
));
|
||||
var memberListWidget = Container(
|
||||
decoration: BoxDecoration(
|
||||
color: themeData.cardColor,
|
||||
borderRadius: BorderRadius.circular(
|
||||
Base.BASE_PADDING,
|
||||
),
|
||||
),
|
||||
margin: listWidgetMargin,
|
||||
padding: EdgeInsets.all(Base.BASE_PADDING),
|
||||
child: Row(
|
||||
children: memberList,
|
||||
),
|
||||
);
|
||||
|
||||
List<Widget> webItemList = [];
|
||||
webItemList.add(MeRouterWebItemComponent(
|
||||
num: 102,
|
||||
name: "Bookmarks",
|
||||
// margin: EdgeInsets.only(right: Base.BASE_PADDING),
|
||||
));
|
||||
webItemList.add(MeRouterWebItemComponent(
|
||||
num: 999,
|
||||
name: "Historys",
|
||||
// margin:
|
||||
// EdgeInsets.only(left: Base.BASE_PADDING, right: Base.BASE_PADDING),
|
||||
));
|
||||
webItemList.add(MeRouterWebItemComponent(
|
||||
num: 30,
|
||||
name: "Downloads",
|
||||
// margin:
|
||||
// EdgeInsets.only(left: Base.BASE_PADDING, right: Base.BASE_PADDING),
|
||||
));
|
||||
webItemList.add(MeRouterWebItemComponent(
|
||||
num: 102,
|
||||
name: "Bookmarks",
|
||||
// margin: EdgeInsets.only(left: Base.BASE_PADDING),
|
||||
));
|
||||
var webItemWidget = Container(
|
||||
margin: listWidgetMargin,
|
||||
child: Row(
|
||||
children: webItemList,
|
||||
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
||||
),
|
||||
);
|
||||
|
||||
List<Widget> appList = [];
|
||||
appList.add(Container(
|
||||
child: MeRouterAppItemComponent(),
|
||||
));
|
||||
appList.add(Divider());
|
||||
appList.add(Container(
|
||||
child: MeRouterAppItemComponent(),
|
||||
));
|
||||
appList.add(Divider());
|
||||
appList.add(Container(
|
||||
child: MeRouterAppItemComponent(),
|
||||
));
|
||||
appList.add(Divider());
|
||||
appList.add(Container(
|
||||
alignment: Alignment.center,
|
||||
child: Text(
|
||||
"Show more",
|
||||
style: TextStyle(
|
||||
decoration: TextDecoration.underline,
|
||||
),
|
||||
),
|
||||
));
|
||||
var appListWidget = Container(
|
||||
margin: listWidgetMargin,
|
||||
padding: EdgeInsets.all(Base.BASE_PADDING),
|
||||
decoration: BoxDecoration(
|
||||
color: themeData.cardColor,
|
||||
borderRadius: BorderRadius.circular(
|
||||
Base.BASE_PADDING,
|
||||
),
|
||||
),
|
||||
child: Column(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: appList,
|
||||
),
|
||||
);
|
||||
|
||||
List<Widget> logList = [];
|
||||
logList.add(Container(
|
||||
child: MeRouterLogItemComponent(),
|
||||
));
|
||||
logList.add(Divider());
|
||||
logList.add(Container(
|
||||
child: MeRouterLogItemComponent(),
|
||||
));
|
||||
logList.add(Divider());
|
||||
logList.add(Container(
|
||||
child: MeRouterLogItemComponent(),
|
||||
));
|
||||
logList.add(Divider());
|
||||
logList.add(Container(
|
||||
alignment: Alignment.center,
|
||||
child: Text(
|
||||
"Show more",
|
||||
style: TextStyle(
|
||||
decoration: TextDecoration.underline,
|
||||
),
|
||||
),
|
||||
));
|
||||
var logListWidget = Container(
|
||||
margin: listWidgetMargin,
|
||||
padding: EdgeInsets.all(Base.BASE_PADDING),
|
||||
decoration: BoxDecoration(
|
||||
color: themeData.cardColor,
|
||||
borderRadius: BorderRadius.circular(
|
||||
Base.BASE_PADDING,
|
||||
),
|
||||
),
|
||||
child: Column(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: logList,
|
||||
),
|
||||
);
|
||||
|
||||
var main = SingleChildScrollView(
|
||||
child: Container(
|
||||
padding: EdgeInsets.only(
|
||||
left: Base.BASE_PADDING,
|
||||
right: Base.BASE_PADDING,
|
||||
top: mediaQueryData.padding.top + Base.BASE_PADDING,
|
||||
bottom: mediaQueryData.padding.bottom + Base.BASE_PADDING,
|
||||
),
|
||||
child: Column(
|
||||
children: [
|
||||
defaultUserWidget,
|
||||
memberListWidget,
|
||||
webItemWidget,
|
||||
appListWidget,
|
||||
logListWidget,
|
||||
],
|
||||
),
|
||||
),
|
||||
);
|
||||
|
||||
return Scaffold(
|
||||
body: main,
|
||||
);
|
||||
}
|
||||
}
|
||||
50
lib/router/me/me_router_app_item_component.dart
Normal file
50
lib/router/me/me_router_app_item_component.dart
Normal file
@@ -0,0 +1,50 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:nowser/component/app/app_type_component.dart';
|
||||
import 'package:nowser/const/app_type.dart';
|
||||
|
||||
import '../../const/base.dart';
|
||||
|
||||
class MeRouterAppItemComponent extends StatefulWidget {
|
||||
@override
|
||||
State<StatefulWidget> createState() {
|
||||
return _MeRouterAppItemComponent();
|
||||
}
|
||||
}
|
||||
|
||||
class _MeRouterAppItemComponent extends State<MeRouterAppItemComponent> {
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
var imageWidget = Container(
|
||||
margin: EdgeInsets.only(
|
||||
left: Base.BASE_PADDING_HALF,
|
||||
right: Base.BASE_PADDING,
|
||||
),
|
||||
child: Icon(Icons.image),
|
||||
);
|
||||
|
||||
var titleWidget = Container(
|
||||
margin: EdgeInsets.only(right: Base.BASE_PADDING),
|
||||
child: Text("Title APP"),
|
||||
);
|
||||
|
||||
var typeWidget = Container(
|
||||
child: AppTypeComponent(AppType.WEB),
|
||||
);
|
||||
|
||||
var rightIconWidget = Container(
|
||||
child: Icon(Icons.chevron_right),
|
||||
);
|
||||
|
||||
return Container(
|
||||
child: Row(
|
||||
children: [
|
||||
imageWidget,
|
||||
titleWidget,
|
||||
typeWidget,
|
||||
Expanded(child: Container()),
|
||||
rightIconWidget,
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
50
lib/router/me/me_router_log_item_component.dart
Normal file
50
lib/router/me/me_router_log_item_component.dart
Normal file
@@ -0,0 +1,50 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:nowser/const/base.dart';
|
||||
|
||||
class MeRouterLogItemComponent extends StatefulWidget {
|
||||
@override
|
||||
State<StatefulWidget> createState() {
|
||||
return _MeRouterLogItemComponent();
|
||||
}
|
||||
}
|
||||
|
||||
class _MeRouterLogItemComponent extends State<MeRouterLogItemComponent> {
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
var appNameWidget = Container(
|
||||
constraints: BoxConstraints(maxWidth: 80),
|
||||
margin: EdgeInsets.only(
|
||||
left: Base.BASE_PADDING_HALF,
|
||||
right: Base.BASE_PADDING,
|
||||
),
|
||||
child: Text(
|
||||
"APP Name APP Name",
|
||||
maxLines: 1,
|
||||
overflow: TextOverflow.ellipsis,
|
||||
),
|
||||
);
|
||||
|
||||
var logWidget = Expanded(
|
||||
child: Container(
|
||||
child: Text(
|
||||
"Log Log Log Log Log Log Log Log Log Log Log Log Log Log Log Log",
|
||||
maxLines: 1,
|
||||
overflow: TextOverflow.ellipsis,
|
||||
),
|
||||
));
|
||||
|
||||
var rightIconWidget = Container(
|
||||
child: Icon(Icons.chevron_right),
|
||||
);
|
||||
|
||||
return Container(
|
||||
child: Row(
|
||||
children: [
|
||||
appNameWidget,
|
||||
logWidget,
|
||||
rightIconWidget,
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
62
lib/router/me/me_router_web_item_component.dart
Normal file
62
lib/router/me/me_router_web_item_component.dart
Normal file
@@ -0,0 +1,62 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:nowser/const/base.dart';
|
||||
|
||||
class MeRouterWebItemComponent extends StatefulWidget {
|
||||
int num;
|
||||
|
||||
String name;
|
||||
|
||||
// EdgeInsetsGeometry margin;
|
||||
|
||||
MeRouterWebItemComponent({
|
||||
required this.num,
|
||||
required this.name,
|
||||
// required this.margin,
|
||||
});
|
||||
|
||||
@override
|
||||
State<StatefulWidget> createState() {
|
||||
return _MeRouterWebItemComponent();
|
||||
}
|
||||
}
|
||||
|
||||
class _MeRouterWebItemComponent extends State<MeRouterWebItemComponent> {
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
var themeData = Theme.of(context);
|
||||
var cardColor = themeData.cardColor;
|
||||
|
||||
return Container(
|
||||
alignment: Alignment.center,
|
||||
// margin: widget.margin,
|
||||
child: Container(
|
||||
width: 80,
|
||||
padding: const EdgeInsets.only(
|
||||
left: Base.BASE_PADDING,
|
||||
right: Base.BASE_PADDING,
|
||||
top: Base.BASE_PADDING,
|
||||
bottom: Base.BASE_PADDING,
|
||||
),
|
||||
decoration: BoxDecoration(
|
||||
color: cardColor,
|
||||
borderRadius: BorderRadius.circular(Base.BASE_PADDING),
|
||||
),
|
||||
child: Column(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: [
|
||||
Text(
|
||||
"${widget.num}",
|
||||
maxLines: 1,
|
||||
overflow: TextOverflow.ellipsis,
|
||||
),
|
||||
Text(
|
||||
widget.name,
|
||||
maxLines: 1,
|
||||
overflow: TextOverflow.ellipsis,
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user