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
import 'package:flutter/material.dart';
import 'package:one_poem/account/page/account_page.dart';
import 'package:one_poem/category/page/categories_page.dart';
import 'package:one_poem/poem/page/poem_page.dart';
import 'package:one_poem/res/resources.dart';
import 'package:one_poem/timeline/pages/timelines_page.dart';
import 'package:one_poem/util/theme_utils.dart';
import 'package:one_poem/widgets/double_tap_back_exit_app.dart';
import 'package:provider/provider.dart';
import 'package:flutter_gen/gen_l10n/one_poem_localizations.dart';
......@@ -18,8 +14,6 @@ class Home extends StatefulWidget {
}
class _HomeState extends State<Home> with RestorationMixin {
static const double _imageSize = 25.0;
late List<Widget> _pageList;
final PageController _pageController = PageController();
......@@ -42,134 +36,85 @@ class _HomeState extends State<Home> with RestorationMixin {
void initData() {
_pageList = [
const PoemPage(),
const TimelinesPage(),
const CategoriesPage(),
const AccountPage(),
];
}
List<BottomNavigationBarItem> _buildBottomNavigationBarItem(
BuildContext context) {
final bool isDark = context.isDark;
List<String> _appBarTitles = [
OnePoemLocalizations.of(context).onePoemBottomNavigationBarItemTitle,
OnePoemLocalizations.of(context).timelineBottomNavigationBarItemTitle,
OnePoemLocalizations.of(context).categoryBottomNavigationBarItemTitle,
OnePoemLocalizations.of(context).profileBottomNavigationBarItemTitle,
];
if (_list == null) {
List<List<Icon>> _tabImages;
if (!isDark) {
_tabImages = [
[
const Icon(
Icons.stream,
),
const Icon(
Icons.stream_outlined,
),
],
[
const Icon(
Icons.self_improvement_outlined,
),
const Icon(
Icons.self_improvement_outlined,
),
],[
const Icon(
Icons.groups,
),
const Icon(
Icons.groups_outlined,
),
],[
const Icon(
Icons.perm_identity,
),
const Icon(
Icons.perm_identity_outlined,
),
],
];
} else {
_tabImages = [
[
const Icon(
Icons.stream,
),
const Icon(
Icons.stream_outlined,
),
],
[
const Icon(
Icons.self_improvement_outlined,
),
const Icon(
Icons.self_improvement_outlined,
),
],[
const Icon(
Icons.groups,
),
const Icon(
Icons.groups_outlined,
),
],[
const Icon(
Icons.perm_identity,
),
const Icon(
Icons.perm_identity_outlined,
),
],
];
}
_list = List.generate(_tabImages.length, (i) {
return BottomNavigationBarItem(
icon: _tabImages[i][0],
activeIcon: _tabImages[i][1],
label: _appBarTitles[i],
);
});
}
return _list!;
}
@override
Widget build(BuildContext context) {
final bool isDark = context.isDark;
return ChangeNotifierProvider<HomeProvider>(
create: (_) => provider,
child: DoubleTapBackExitApp(
child: Scaffold(
bottomNavigationBar: Consumer<HomeProvider>(
builder: (_, provider, __) {
return BottomNavigationBar(
backgroundColor: context.backgroundColor,
items: _buildBottomNavigationBarItem(context),
type: BottomNavigationBarType.fixed,
currentIndex: provider.value,
elevation: 5.0,
iconSize: 21.0,
selectedFontSize: Dimens.font_sp10,
unselectedFontSize: Dimens.font_sp10,
selectedItemColor: Theme.of(context).primaryColor,
unselectedItemColor: isDark
? Colours.dark_unselected_item_color
: Colours.unselected_item_color,
onTap: (index) => _pageController.jumpToPage(index),
);
},
),
// 使用PageView的原因参看 https://zhuanlan.zhihu.com/p/58582876
body: PageView(
physics: const NeverScrollableScrollPhysics(), // 禁止滑动
controller: _pageController,
onPageChanged: (int index) => provider.value = index,
children: _pageList,
)),
floatingActionButton: FloatingActionButton(
onPressed: () {},
tooltip: "发一言",
backgroundColor: Colors.white,
child: const Icon(
Icons.add,
color: Colors.black45,
),
),
floatingActionButtonLocation:
FloatingActionButtonLocation.centerDocked,
bottomNavigationBar: Consumer<HomeProvider>(
builder: (_, provider, __) {
return BottomAppBar(
color: Colors.black45,
shape: const CircularNotchedRectangle(),
child: Row(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: <Widget>[
InkWell(
onTap: () {
_pageController.animateToPage(0,
duration: const Duration(milliseconds: 100), curve: Curves.easeOutSine);
},
child: Container(
alignment: Alignment.center,
height: 36.0,
child: Text(
OnePoemLocalizations.of(context)
.onePoemBottomNavigationBarItemTitle,
style: const TextStyle(
color: Colors.white54,
fontSize: 15.0,
),
),
),
),
InkWell(
onTap: () {
_pageController.animateToPage(1,
duration: const Duration(milliseconds: 100), curve: Curves.easeOutSine);
},
child: Container(
alignment: Alignment.center,
height: 36.0,
child: Text(
OnePoemLocalizations.of(context)
.profileBottomNavigationBarItemTitle,
style: const TextStyle(
color: Colors.white54,
fontSize: 15.0,
),
),
),
),
]),
elevation: 5.0,
);
},
),
// 使用PageView的原因参看 https://zhuanlan.zhihu.com/p/58582876
body: PageView(
physics: const NeverScrollableScrollPhysics(), // 禁止滑动
controller: _pageController,
onPageChanged: (int index) => provider.value = index,
children: _pageList,
),
),
),
);
}
......
......@@ -9,7 +9,7 @@ import 'package:one_poem/tiktok/widgets/tiktok_top_info.dart';
import 'package:one_poem/tiktok/widgets/tiktok_video.dart';
import 'package:one_poem/tiktok/widgets/tiktok_video_button_column.dart';
import 'package:one_poem/tiktok/widgets/tiktok_video_poem.dart';
import 'package:one_poem/widgets/bars/home_action_bar.dart';
import 'package:one_poem/widgets/bars/home_types_bar.dart';
import 'package:one_poem/widgets/my_app_bar.dart';
import 'package:video_player/video_player.dart';
......@@ -118,10 +118,13 @@ class _PoemPageState extends State<PoemPage> with WidgetsBindingObserver {
header: MyAppBar(
isBack: false,
isTransparent: true,
homeActionWidgets: HomeActionWidgets(
funcStar: () {
print("starrrrrrr");
},
homeMenuHeader: const HomeTypesHeader(),
homeActionWidgets: IconButton(
icon: const Icon(
Icons.search,
color: Colors.white,
),
onPressed: () {},
),
),
leftPage: searchPage,
......
......@@ -2,7 +2,7 @@ import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';
class SysSize {
static const double avatar = 56;
static const double avatar = 30;
static const double iconNormal = 24;
static const double iconBig = 40;
static const double big = 16;
......
......@@ -18,7 +18,7 @@ class TikTokTopInfoColumn extends StatelessWidget {
Widget build(BuildContext context) {
return SafeArea(
child: Container(
margin: EdgeInsets.symmetric(vertical: 40.px, horizontal: 25.px),
margin: EdgeInsets.symmetric(vertical: 40.px, horizontal: 40.px),
height: 92.px,
width: double.infinity,
decoration: BoxDecoration(
......
......@@ -27,39 +27,26 @@ class TikTokButtonColumn extends StatelessWidget {
width: SysSize.avatar,
margin: EdgeInsets.only(
bottom: bottomPadding ?? 50.px,
right: 12.px,
right: 5.px,
),
child: Column(
mainAxisAlignment: MainAxisAlignment.end,
crossAxisAlignment: CrossAxisAlignment.end,
children: <Widget>[
// Tapped(
// child: const TikTokAvatar(),
// onTap: onAvatar,
// ),
// FavoriteIcon(
// onFavorite: onFavorite,
// isFavorite: isFavorite,
// ),
// _IconButton(
// icon: const IconToText(Icons.mode_comment, size: SysSize.iconBig - 4),
// text: '4213',
// onTap: onComment,
// ),
// _IconButton(
// icon: const IconToText(Icons.share, size: SysSize.iconBig),
// text: '346',
// onTap: onShare,
// ),
Container(
width: SysSize.avatar,
height: SysSize.avatar,
margin: EdgeInsets.only(top: 10.px),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(SysSize.avatar / 2.0),
// color: Colors.black.withOpacity(0.8),
),
)
FavoriteIcon(
onFavorite: onFavorite,
isFavorite: isFavorite,
),
_IconButton(
icon: IconToText(Icons.star_border, size: 20.px),
text: '收藏',
onTap: onComment,
),
_IconButton(
icon: IconToText(Icons.share, size: 20.px),
text: '分享',
onTap: onShare,
),
],
),
);
......@@ -79,66 +66,16 @@ class FavoriteIcon extends StatelessWidget {
Widget build(BuildContext context) {
return _IconButton(
icon: IconToText(
Icons.favorite,
size: SysSize.iconBig,
Icons.favorite_border_outlined,
size: 20,
color: isFavorite! ? ColorPlate.red : null,
),
text: '1.0w',
text: '喜爱',
onTap: onFavorite,
);
}
}
class TikTokAvatar extends StatelessWidget {
const TikTokAvatar({
Key? key,
}) : super(key: key);
@override
Widget build(BuildContext context) {
Widget avatar = Container(
width: SysSize.avatar,
height: SysSize.avatar,
margin: const EdgeInsets.only(bottom: 10),
decoration: BoxDecoration(
border: Border.all(
color: Colors.white,
width: 1,
),
borderRadius: BorderRadius.circular(SysSize.avatar / 2.0),
color: Colors.orange,
),
child: ClipOval(
child: Image.network(
"https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif",
fit: BoxFit.cover,
),
),
);
Widget addButton = Container(
width: 20.px,
height: 20.px,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10.px),
color: ColorPlate.orange,
),
child: Icon(
Icons.add,
size: 16.px,
),
);
return Container(
width: SysSize.avatar,
height: 66.px,
margin: EdgeInsets.only(bottom: 6.px),
child: Stack(
alignment: Alignment.bottomCenter,
children: <Widget>[avatar, addButton],
),
);
}
}
/// 把IconData转换为文字，使其可以使用文字样式
class IconToText extends StatelessWidget {
final IconData? icon;
......@@ -160,7 +97,7 @@ class IconToText extends StatelessWidget {
style: style ??
TextStyle(
fontFamily: 'MaterialIcons',
fontSize: size ?? 30.px,
fontSize: size ?? 15.px,
inherit: true,
color: color ?? ColorPlate.white,
),
......@@ -200,8 +137,7 @@ class _IconButton extends StatelessWidget {
Text(
text ?? '??',
style: const TextStyle(
fontWeight: FontWeight.normal,
fontSize: SysSize.small,
fontSize: 12,
color: ColorPlate.white,
),
),
......
......@@ -31,7 +31,7 @@ class TikTokVidePoem extends StatelessWidget {
),
height: 190.px,
width: double.infinity,
margin: EdgeInsets.symmetric(vertical: 10.px, horizontal: 25.px),
margin: EdgeInsets.symmetric(vertical: 10.px, horizontal: 40.px),
child: InkWell(
child: ClipRect(
child: BackdropFilter(
......
import 'package:flutter/material.dart';
import 'package:one_poem/extension/int_extension.dart';
class HomeTypesHeader extends StatelessWidget {
const HomeTypesHeader({
Key? key,
this.funcLeft,
this.funcCenter,
this.funcRight,
}) : super(key: key);
final Function? funcLeft;
final Function? funcCenter;
final Function? funcRight;
@override
Widget build(BuildContext context) {
return Container(
alignment: Alignment.center,
margin: const EdgeInsets.symmetric(horizontal: 5.0),
padding: const EdgeInsets.only(top: 10.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
mainAxisSize: MainAxisSize.min,
//交叉轴的布局方式，对于column来说就是水平方向的布局方式
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
SizedBox(
width: 60.0,
child: TextButton(
onPressed: () => funcLeft!(),
child: Text(
"临境",
style: TextStyle(color: Colors.white, fontSize: 15.px),
),
),
),
const VerticalDivider(
color: Colors.white,
width: 1.0,
thickness: 1.0,
indent: 10.0,
endIndent: 10.0,
),
TextButton(
onPressed: () => funcCenter!(),
child: Text(
"妙众",
style: TextStyle(color: Colors.white, fontSize: 15.px),
),
),
const VerticalDivider(
color: Colors.white,
width: 1.0,
thickness: 1.0,
indent: 10.0,
endIndent: 10.0,
),
TextButton(
onPressed: () => funcRight!(),
child: Text(
"新鲜",
style: TextStyle(color: Colors.white, fontSize: 15.px),
),
),
],
));
}
}
......@@ -69,6 +69,7 @@ class MyAppBar extends StatelessWidget implements PreferredSizeWidget {
),
SizedBox(
child: Container(
padding: const EdgeInsets.only(top: 10.0),
alignment: Alignment.centerRight,
child: homeActionWidgets,
),
......