OnePoem / OnePoem-App

Go to a project
Toggle navigation Toggle navigation pinning
reason
5e5a872f 1 parent a0e75baa

清理页面样式

Inline Side-by-side
Showing 8 changed files with 170 additions and 216 deletions
1 import 'package:flutter/material.dart'; 1 import 'package:flutter/material.dart';
2 import 'package:one_poem/account/page/account_page.dart'; 2 import 'package:one_poem/account/page/account_page.dart';
3 -import 'package:one_poem/category/page/categories_page.dart';
4 import 'package:one_poem/poem/page/poem_page.dart'; 3 import 'package:one_poem/poem/page/poem_page.dart';
5 -import 'package:one_poem/res/resources.dart';
6 -import 'package:one_poem/timeline/pages/timelines_page.dart';
7 -import 'package:one_poem/util/theme_utils.dart';
8 import 'package:one_poem/widgets/double_tap_back_exit_app.dart'; 4 import 'package:one_poem/widgets/double_tap_back_exit_app.dart';
9 import 'package:provider/provider.dart'; 5 import 'package:provider/provider.dart';
10 import 'package:flutter_gen/gen_l10n/one_poem_localizations.dart'; 6 import 'package:flutter_gen/gen_l10n/one_poem_localizations.dart';
...@@ -18,8 +14,6 @@ class Home extends StatefulWidget { ...@@ -18,8 +14,6 @@ class Home extends StatefulWidget {
18 } 14 }
19 15
20 class _HomeState extends State<Home> with RestorationMixin { 16 class _HomeState extends State<Home> with RestorationMixin {
21 - static const double _imageSize = 25.0;
22 -
23 late List<Widget> _pageList; 17 late List<Widget> _pageList;
24 final PageController _pageController = PageController(); 18 final PageController _pageController = PageController();
25 19
...@@ -42,134 +36,85 @@ class _HomeState extends State<Home> with RestorationMixin { ...@@ -42,134 +36,85 @@ class _HomeState extends State<Home> with RestorationMixin {
42 void initData() { 36 void initData() {
43 _pageList = [ 37 _pageList = [
44 const PoemPage(), 38 const PoemPage(),
45 - const TimelinesPage(),
46 - const CategoriesPage(),
47 const AccountPage(), 39 const AccountPage(),
48 ]; 40 ];
49 } 41 }
50 42
51 - List<BottomNavigationBarItem> _buildBottomNavigationBarItem(
52 - BuildContext context) {
53 - final bool isDark = context.isDark;
54 - List<String> _appBarTitles = [
55 - OnePoemLocalizations.of(context).onePoemBottomNavigationBarItemTitle,
56 - OnePoemLocalizations.of(context).timelineBottomNavigationBarItemTitle,
57 - OnePoemLocalizations.of(context).categoryBottomNavigationBarItemTitle,
58 - OnePoemLocalizations.of(context).profileBottomNavigationBarItemTitle,
59 - ];
60 - if (_list == null) {
61 - List<List<Icon>> _tabImages;
62 - if (!isDark) {
63 - _tabImages = [
64 - [
65 - const Icon(
66 - Icons.stream,
67 - ),
68 - const Icon(
69 - Icons.stream_outlined,
70 - ),
71 - ],
72 - [
73 - const Icon(
74 - Icons.self_improvement_outlined,
75 - ),
76 - const Icon(
77 - Icons.self_improvement_outlined,
78 - ),
79 - ],[
80 - const Icon(
81 - Icons.groups,
82 - ),
83 - const Icon(
84 - Icons.groups_outlined,
85 - ),
86 - ],[
87 - const Icon(
88 - Icons.perm_identity,
89 - ),
90 - const Icon(
91 - Icons.perm_identity_outlined,
92 - ),
93 - ],
94 - ];
95 - } else {
96 - _tabImages = [
97 - [
98 - const Icon(
99 - Icons.stream,
100 - ),
101 - const Icon(
102 - Icons.stream_outlined,
103 - ),
104 - ],
105 - [
106 - const Icon(
107 - Icons.self_improvement_outlined,
108 - ),
109 - const Icon(
110 - Icons.self_improvement_outlined,
111 - ),
112 - ],[
113 - const Icon(
114 - Icons.groups,
115 - ),
116 - const Icon(
117 - Icons.groups_outlined,
118 - ),
119 - ],[
120 - const Icon(
121 - Icons.perm_identity,
122 - ),
123 - const Icon(
124 - Icons.perm_identity_outlined,
125 - ),
126 - ],
127 - ];
128 - }
129 - _list = List.generate(_tabImages.length, (i) {
130 - return BottomNavigationBarItem(
131 - icon: _tabImages[i][0],
132 - activeIcon: _tabImages[i][1],
133 - label: _appBarTitles[i],
134 - );
135 - });
136 - }
137 - return _list!;
138 - }
139 -
140 @override 43 @override
141 Widget build(BuildContext context) { 44 Widget build(BuildContext context) {
142 - final bool isDark = context.isDark;
143 return ChangeNotifierProvider<HomeProvider>( 45 return ChangeNotifierProvider<HomeProvider>(
144 create: (_) => provider, 46 create: (_) => provider,
145 child: DoubleTapBackExitApp( 47 child: DoubleTapBackExitApp(
146 child: Scaffold( 48 child: Scaffold(
147 - bottomNavigationBar: Consumer<HomeProvider>( 49 + floatingActionButton: FloatingActionButton(
148 - builder: (_, provider, __) { 50 + onPressed: () {},
149 - return BottomNavigationBar( 51 + tooltip: "发一言",
150 - backgroundColor: context.backgroundColor, 52 + backgroundColor: Colors.white,
151 - items: _buildBottomNavigationBarItem(context), 53 + child: const Icon(
152 - type: BottomNavigationBarType.fixed, 54 + Icons.add,
153 - currentIndex: provider.value, 55 + color: Colors.black45,
154 - elevation: 5.0, 56 + ),
155 - iconSize: 21.0, 57 + ),
156 - selectedFontSize: Dimens.font_sp10, 58 + floatingActionButtonLocation:
157 - unselectedFontSize: Dimens.font_sp10, 59 + FloatingActionButtonLocation.centerDocked,
158 - selectedItemColor: Theme.of(context).primaryColor, 60 + bottomNavigationBar: Consumer<HomeProvider>(
159 - unselectedItemColor: isDark 61 + builder: (_, provider, __) {
160 - ? Colours.dark_unselected_item_color 62 + return BottomAppBar(
161 - : Colours.unselected_item_color, 63 + color: Colors.black45,
162 - onTap: (index) => _pageController.jumpToPage(index), 64 + shape: const CircularNotchedRectangle(),
163 - ); 65 + child: Row(
164 - }, 66 + mainAxisSize: MainAxisSize.max,
165 - ), 67 + mainAxisAlignment: MainAxisAlignment.spaceAround,
166 - // 使用PageView的原因参看 https://zhuanlan.zhihu.com/p/58582876 68 + children: <Widget>[
167 - body: PageView( 69 + InkWell(
168 - physics: const NeverScrollableScrollPhysics(), // 禁止滑动 70 + onTap: () {
169 - controller: _pageController, 71 + _pageController.animateToPage(0,
170 - onPageChanged: (int index) => provider.value = index, 72 + duration: const Duration(milliseconds: 100), curve: Curves.easeOutSine);
171 - children: _pageList, 73 + },
172 - )), 74 + child: Container(
75 + alignment: Alignment.center,
76 + height: 36.0,
77 + child: Text(
78 + OnePoemLocalizations.of(context)
79 + .onePoemBottomNavigationBarItemTitle,
80 + style: const TextStyle(
81 + color: Colors.white54,
82 + fontSize: 15.0,
83 + ),
84 + ),
85 + ),
86 + ),
87 + InkWell(
88 + onTap: () {
89 + _pageController.animateToPage(1,
90 + duration: const Duration(milliseconds: 100), curve: Curves.easeOutSine);
91 + },
92 + child: Container(
93 + alignment: Alignment.center,
94 + height: 36.0,
95 + child: Text(
96 + OnePoemLocalizations.of(context)
97 + .profileBottomNavigationBarItemTitle,
98 + style: const TextStyle(
99 + color: Colors.white54,
100 + fontSize: 15.0,
101 + ),
102 + ),
103 + ),
104 + ),
105 + ]),
106 + elevation: 5.0,
107 + );
108 + },
109 + ),
110 + // 使用PageView的原因参看 https://zhuanlan.zhihu.com/p/58582876
111 + body: PageView(
112 + physics: const NeverScrollableScrollPhysics(), // 禁止滑动
113 + controller: _pageController,
114 + onPageChanged: (int index) => provider.value = index,
115 + children: _pageList,
116 + ),
117 + ),
173 ), 118 ),
174 ); 119 );
175 } 120 }
......
...@@ -9,7 +9,7 @@ import 'package:one_poem/tiktok/widgets/tiktok_top_info.dart'; ...@@ -9,7 +9,7 @@ import 'package:one_poem/tiktok/widgets/tiktok_top_info.dart';
9 import 'package:one_poem/tiktok/widgets/tiktok_video.dart'; 9 import 'package:one_poem/tiktok/widgets/tiktok_video.dart';
10 import 'package:one_poem/tiktok/widgets/tiktok_video_button_column.dart'; 10 import 'package:one_poem/tiktok/widgets/tiktok_video_button_column.dart';
11 import 'package:one_poem/tiktok/widgets/tiktok_video_poem.dart'; 11 import 'package:one_poem/tiktok/widgets/tiktok_video_poem.dart';
12 -import 'package:one_poem/widgets/bars/home_action_bar.dart'; 12 +import 'package:one_poem/widgets/bars/home_types_bar.dart';
13 import 'package:one_poem/widgets/my_app_bar.dart'; 13 import 'package:one_poem/widgets/my_app_bar.dart';
14 import 'package:video_player/video_player.dart'; 14 import 'package:video_player/video_player.dart';
15 15
...@@ -118,10 +118,13 @@ class _PoemPageState extends State<PoemPage> with WidgetsBindingObserver { ...@@ -118,10 +118,13 @@ class _PoemPageState extends State<PoemPage> with WidgetsBindingObserver {
118 header: MyAppBar( 118 header: MyAppBar(
119 isBack: false, 119 isBack: false,
120 isTransparent: true, 120 isTransparent: true,
121 - homeActionWidgets: HomeActionWidgets( 121 + homeMenuHeader: const HomeTypesHeader(),
122 - funcStar: () { 122 + homeActionWidgets: IconButton(
123 - print("starrrrrrr"); 123 + icon: const Icon(
124 - }, 124 + Icons.search,
125 + color: Colors.white,
126 + ),
127 + onPressed: () {},
125 ), 128 ),
126 ), 129 ),
127 leftPage: searchPage, 130 leftPage: searchPage,
......
...@@ -2,7 +2,7 @@ import 'package:flutter/material.dart'; ...@@ -2,7 +2,7 @@ import 'package:flutter/material.dart';
2 import 'package:flutter/rendering.dart'; 2 import 'package:flutter/rendering.dart';
3 3
4 class SysSize { 4 class SysSize {
5 - static const double avatar = 56; 5 + static const double avatar = 30;
6 static const double iconNormal = 24; 6 static const double iconNormal = 24;
7 static const double iconBig = 40; 7 static const double iconBig = 40;
8 static const double big = 16; 8 static const double big = 16;
......
...@@ -18,7 +18,7 @@ class TikTokTopInfoColumn extends StatelessWidget { ...@@ -18,7 +18,7 @@ class TikTokTopInfoColumn extends StatelessWidget {
18 Widget build(BuildContext context) { 18 Widget build(BuildContext context) {
19 return SafeArea( 19 return SafeArea(
20 child: Container( 20 child: Container(
21 - margin: EdgeInsets.symmetric(vertical: 40.px, horizontal: 25.px), 21 + margin: EdgeInsets.symmetric(vertical: 40.px, horizontal: 40.px),
22 height: 92.px, 22 height: 92.px,
23 width: double.infinity, 23 width: double.infinity,
24 decoration: BoxDecoration( 24 decoration: BoxDecoration(
......
...@@ -27,39 +27,26 @@ class TikTokButtonColumn extends StatelessWidget { ...@@ -27,39 +27,26 @@ class TikTokButtonColumn extends StatelessWidget {
27 width: SysSize.avatar, 27 width: SysSize.avatar,
28 margin: EdgeInsets.only( 28 margin: EdgeInsets.only(
29 bottom: bottomPadding ?? 50.px, 29 bottom: bottomPadding ?? 50.px,
30 - right: 12.px, 30 + right: 5.px,
31 ), 31 ),
32 child: Column( 32 child: Column(
33 mainAxisAlignment: MainAxisAlignment.end, 33 mainAxisAlignment: MainAxisAlignment.end,
34 crossAxisAlignment: CrossAxisAlignment.end, 34 crossAxisAlignment: CrossAxisAlignment.end,
35 children: <Widget>[ 35 children: <Widget>[
36 - // Tapped( 36 + FavoriteIcon(
37 - // child: const TikTokAvatar(), 37 + onFavorite: onFavorite,
38 - // onTap: onAvatar, 38 + isFavorite: isFavorite,
39 - // ), 39 + ),
40 - // FavoriteIcon( 40 + _IconButton(
41 - // onFavorite: onFavorite, 41 + icon: IconToText(Icons.star_border, size: 20.px),
42 - // isFavorite: isFavorite, 42 + text: '收藏',
43 - // ), 43 + onTap: onComment,
44 - // _IconButton( 44 + ),
45 - // icon: const IconToText(Icons.mode_comment, size: SysSize.iconBig - 4), 45 + _IconButton(
46 - // text: '4213', 46 + icon: IconToText(Icons.share, size: 20.px),
47 - // onTap: onComment, 47 + text: '分享',
48 - // ), 48 + onTap: onShare,
49 - // _IconButton( 49 + ),
50 - // icon: const IconToText(Icons.share, size: SysSize.iconBig),
51 - // text: '346',
52 - // onTap: onShare,
53 - // ),
54 - Container(
55 - width: SysSize.avatar,
56 - height: SysSize.avatar,
57 - margin: EdgeInsets.only(top: 10.px),
58 - decoration: BoxDecoration(
59 - borderRadius: BorderRadius.circular(SysSize.avatar / 2.0),
60 - // color: Colors.black.withOpacity(0.8),
61 - ),
62 - )
63 ], 50 ],
64 ), 51 ),
65 ); 52 );
...@@ -79,66 +66,16 @@ class FavoriteIcon extends StatelessWidget { ...@@ -79,66 +66,16 @@ class FavoriteIcon extends StatelessWidget {
79 Widget build(BuildContext context) { 66 Widget build(BuildContext context) {
80 return _IconButton( 67 return _IconButton(
81 icon: IconToText( 68 icon: IconToText(
82 - Icons.favorite, 69 + Icons.favorite_border_outlined,
83 - size: SysSize.iconBig, 70 + size: 20,
84 color: isFavorite! ? ColorPlate.red : null, 71 color: isFavorite! ? ColorPlate.red : null,
85 ), 72 ),
86 - text: '1.0w', 73 + text: '喜爱',
87 onTap: onFavorite, 74 onTap: onFavorite,
88 ); 75 );
89 } 76 }
90 } 77 }
91 78
92 -class TikTokAvatar extends StatelessWidget {
93 - const TikTokAvatar({
94 - Key? key,
95 - }) : super(key: key);
96 -
97 - @override
98 - Widget build(BuildContext context) {
99 - Widget avatar = Container(
100 - width: SysSize.avatar,
101 - height: SysSize.avatar,
102 - margin: const EdgeInsets.only(bottom: 10),
103 - decoration: BoxDecoration(
104 - border: Border.all(
105 - color: Colors.white,
106 - width: 1,
107 - ),
108 - borderRadius: BorderRadius.circular(SysSize.avatar / 2.0),
109 - color: Colors.orange,
110 - ),
111 - child: ClipOval(
112 - child: Image.network(
113 - "https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif",
114 - fit: BoxFit.cover,
115 - ),
116 - ),
117 - );
118 - Widget addButton = Container(
119 - width: 20.px,
120 - height: 20.px,
121 - decoration: BoxDecoration(
122 - borderRadius: BorderRadius.circular(10.px),
123 - color: ColorPlate.orange,
124 - ),
125 - child: Icon(
126 - Icons.add,
127 - size: 16.px,
128 - ),
129 - );
130 - return Container(
131 - width: SysSize.avatar,
132 - height: 66.px,
133 - margin: EdgeInsets.only(bottom: 6.px),
134 - child: Stack(
135 - alignment: Alignment.bottomCenter,
136 - children: <Widget>[avatar, addButton],
137 - ),
138 - );
139 - }
140 -}
141 -
142 /// 把IconData转换为文字，使其可以使用文字样式 79 /// 把IconData转换为文字，使其可以使用文字样式
143 class IconToText extends StatelessWidget { 80 class IconToText extends StatelessWidget {
144 final IconData? icon; 81 final IconData? icon;
...@@ -160,7 +97,7 @@ class IconToText extends StatelessWidget { ...@@ -160,7 +97,7 @@ class IconToText extends StatelessWidget {
160 style: style ?? 97 style: style ??
161 TextStyle( 98 TextStyle(
162 fontFamily: 'MaterialIcons', 99 fontFamily: 'MaterialIcons',
163 - fontSize: size ?? 30.px, 100 + fontSize: size ?? 15.px,
164 inherit: true, 101 inherit: true,
165 color: color ?? ColorPlate.white, 102 color: color ?? ColorPlate.white,
166 ), 103 ),
...@@ -200,8 +137,7 @@ class _IconButton extends StatelessWidget { ...@@ -200,8 +137,7 @@ class _IconButton extends StatelessWidget {
200 Text( 137 Text(
201 text ?? '??', 138 text ?? '??',
202 style: const TextStyle( 139 style: const TextStyle(
203 - fontWeight: FontWeight.normal, 140 + fontSize: 12,
204 - fontSize: SysSize.small,
205 color: ColorPlate.white, 141 color: ColorPlate.white,
206 ), 142 ),
207 ), 143 ),
......
...@@ -31,7 +31,7 @@ class TikTokVidePoem extends StatelessWidget { ...@@ -31,7 +31,7 @@ class TikTokVidePoem extends StatelessWidget {
31 ), 31 ),
32 height: 190.px, 32 height: 190.px,
33 width: double.infinity, 33 width: double.infinity,
34 - margin: EdgeInsets.symmetric(vertical: 10.px, horizontal: 25.px), 34 + margin: EdgeInsets.symmetric(vertical: 10.px, horizontal: 40.px),
35 child: InkWell( 35 child: InkWell(
36 child: ClipRect( 36 child: ClipRect(
37 child: BackdropFilter( 37 child: BackdropFilter(
......
1 +import 'package:flutter/material.dart';
2 +import 'package:one_poem/extension/int_extension.dart';
3 +
4 +class HomeTypesHeader extends StatelessWidget {
5 + const HomeTypesHeader({
6 + Key? key,
7 + this.funcLeft,
8 + this.funcCenter,
9 + this.funcRight,
10 + }) : super(key: key);
11 +
12 + final Function? funcLeft;
13 + final Function? funcCenter;
14 + final Function? funcRight;
15 +
16 + @override
17 + Widget build(BuildContext context) {
18 + return Container(
19 + alignment: Alignment.center,
20 + margin: const EdgeInsets.symmetric(horizontal: 5.0),
21 + padding: const EdgeInsets.only(top: 10.0),
22 + child: Row(
23 + mainAxisAlignment: MainAxisAlignment.spaceBetween,
24 + mainAxisSize: MainAxisSize.min,
25 + //交叉轴的布局方式，对于column来说就是水平方向的布局方式
26 + crossAxisAlignment: CrossAxisAlignment.center,
27 + children: <Widget>[
28 + SizedBox(
29 + width: 60.0,
30 + child: TextButton(
31 + onPressed: () => funcLeft!(),
32 + child: Text(
33 + "临境",
34 + style: TextStyle(color: Colors.white, fontSize: 15.px),
35 + ),
36 + ),
37 + ),
38 + const VerticalDivider(
39 + color: Colors.white,
40 + width: 1.0,
41 + thickness: 1.0,
42 + indent: 10.0,
43 + endIndent: 10.0,
44 + ),
45 + TextButton(
46 + onPressed: () => funcCenter!(),
47 + child: Text(
48 + "妙众",
49 + style: TextStyle(color: Colors.white, fontSize: 15.px),
50 + ),
51 + ),
52 + const VerticalDivider(
53 + color: Colors.white,
54 + width: 1.0,
55 + thickness: 1.0,
56 + indent: 10.0,
57 + endIndent: 10.0,
58 + ),
59 + TextButton(
60 + onPressed: () => funcRight!(),
61 + child: Text(
62 + "新鲜",
63 + style: TextStyle(color: Colors.white, fontSize: 15.px),
64 + ),
65 + ),
66 + ],
67 + ));
68 + }
69 +}
...@@ -69,6 +69,7 @@ class MyAppBar extends StatelessWidget implements PreferredSizeWidget { ...@@ -69,6 +69,7 @@ class MyAppBar extends StatelessWidget implements PreferredSizeWidget {
69 ), 69 ),
70 SizedBox( 70 SizedBox(
71 child: Container( 71 child: Container(
72 + padding: const EdgeInsets.only(top: 10.0),
72 alignment: Alignment.centerRight, 73 alignment: Alignment.centerRight,
73 child: homeActionWidgets, 74 child: homeActionWidgets,
74 ), 75 ),
......