OnePoem / OnePoem-App

Go to a project
Toggle navigation Toggle navigation pinning
reason
c4c86519 1 parent f0ecee80

众妙item 样式

Expand all
Inline Side-by-side
Showing 13 changed files with 146 additions and 267 deletions
No preview for this file type
No preview for this file type
......@@ -2,6 +2,7 @@ import 'package:flutter/material.dart';
import 'package:one_poem/category/provider/categories_page_provider.dart';
import 'package:one_poem/util/theme_utils.dart';
import 'package:one_poem/widgets/load_image.dart';
import 'package:one_poem/widgets/my_app_bar.dart';
import 'package:provider/provider.dart';
import 'category_list_page.dart';
......@@ -42,6 +43,8 @@ class _CategoriesPageState extends State<CategoriesPage>
return ChangeNotifierProvider<CategoriesPageProvider>(
create: (_) => provider,
child: Scaffold(
appBar: const MyAppBar(
),
body: Column(
key: _bodyKey,
crossAxisAlignment: CrossAxisAlignment.start,
......
import 'package:common_utils/common_utils.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:one_poem/category/models/category_item_entity.dart';
import 'package:one_poem/res/gaps.dart';
import 'package:one_poem/res/resources.dart';
import 'package:one_poem/util/device_utils.dart';
import 'package:one_poem/util/other_utils.dart';
import 'package:one_poem/util/theme_utils.dart';
import 'package:one_poem/widgets/load_image.dart';
import 'package:one_poem/widgets/my_button.dart';
import 'menu_reveal.dart';
/// design/4商品/index.html#artboard1
class CategoryItem extends StatelessWidget {
const CategoryItem({
Key? key,
required this.item,
......@@ -25,7 +21,7 @@ class CategoryItem extends StatelessWidget {
required this.onTapMenuClose,
required this.animation,
required this.heroTag,
}): super(key: key);
}) : super(key: key);
final CategoryItemEntity item;
final int index;
......@@ -37,189 +33,60 @@ class CategoryItem extends StatelessWidget {
final VoidCallback onTapMenuClose;
final Animation<double> animation;
final String heroTag;
@override
Widget build(BuildContext context) {
final Row child = Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
ExcludeSemantics(
child: Hero(
tag: heroTag,
child: LoadImage(item.icon, width: 72.0, height: 72.0),
return Padding(
padding: const EdgeInsets.only(left: 10.0, top: 10.0, right: 10.0),
child: DecoratedBox(
decoration: BoxDecoration(
image: const DecorationImage(
image: AssetImage("assets/images/category/category_item_bg.png"),
fit: BoxFit.fill,
),
border: Border.all(color: Colors.grey, width: 0.5), // 边色与边宽度
borderRadius: BorderRadius.circular(2.0),
),
Gaps.hGap8,
Expanded(
child: Padding(
padding: const EdgeInsets.all(10.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Text(
item.type % 3 != 0 ? '八月十五中秋月饼礼盒' : '八月十五中秋月饼礼盒八月十五中秋月饼礼盒',
maxLines: 1,
overflow: TextOverflow.ellipsis,
),
Gaps.vGap4,
Row(
children: <Widget>[
Visibility(
// 默认为占位替换，类似于gone
visible: item.type % 3 == 0,
child: _GoodsItemTag(
text: '立减',
color: Theme.of(context).errorColor,
),
),
Opacity(
// 修改透明度实现隐藏，类似于invisible
opacity: item.type % 2 != 0 ? 0.0 : 1.0,
child: _GoodsItemTag(
text: '金币抵扣',
color: Theme.of(context).primaryColor,
),
)
mainAxisAlignment: MainAxisAlignment.spaceBetween,
mainAxisSize: MainAxisSize.max,
//交叉轴的布局方式，对于column来说就是水平方向的布局方式
crossAxisAlignment: CrossAxisAlignment.center,
children: const <Widget>[
Text("此地"),
Text("北京 海淀 万泉庄", maxLines: 3,),
Text("京", style: TextStyle(fontSize: 30)),
],
),
Gaps.vGap16,
Text(Utils.formatPrice('20.00', format: MoneyFormat.NORMAL))
],
),
),
Column(
crossAxisAlignment: CrossAxisAlignment.end,
children: <Widget>[
Semantics(
/// container属性为true，防止上方ExcludeSemantics去除此处语义
container: true,
label: '商品操作菜单',
child: GestureDetector(
onTap: onTapMenu,
child: Container(
key: Key('goods_menu_item_$index'),
width: 44.0,
height: 44.0,
color: Colors.transparent,
padding: const EdgeInsets.only(left: 28.0, bottom: 28.0),
child: const LoadAssetImage('goods/ellipsis'),
),
),
),
Padding(
padding: const EdgeInsets.only(top: 10.0),
child: Text(
'特产美味',
style: Theme.of(context).textTheme.subtitle2,
const Text(
"前不见古人，后不见来者。\n念天地之悠悠，独怆然而涕下。\n",
style: TextStyle(fontSize: 22.0, fontFamily: "ZCOOLXiaoWei"),
),
)
],
)
],
);
return Stack(
children: <Widget>[
// item间的分隔线
Padding(
padding: const EdgeInsets.only(left: 16.0, top: 16.0),
child: DecoratedBox(
decoration: BoxDecoration(
border: Border(
bottom: Divider.createBorderSide(context, width: 0.8),
),
),
child: Padding(
padding: const EdgeInsets.only(right: 16.0, bottom: 16.0),
child: child,
),
const Text("[唐] 陈子昂《登幽州台歌》", maxLines: 1,),
],
),
),
if (selectIndex != index) Gaps.empty else _buildGoodsMenu(context),
],
);
}
Widget _buildGoodsMenu(BuildContext context) {
return Positioned.fill(
child: AnimatedBuilder(
animation: animation,
child: _buildGoodsMenuContent(context),
builder: (_, Widget? child) {
return MenuReveal(
revealPercent: animation.value,
child: child!
);
}
),
);
}
Widget _buildGoodsMenuContent(BuildContext context) {
final bool isDark = context.isDark;
final Color buttonColor = isDark ? Colours.dark_text : Colors.white;
return InkWell(
onTap: onTapMenuClose,
child: Container(
color: isDark ? const Color(0xB34D4D4D) : const Color(0x4D000000),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
Gaps.hGap15,
MyButton(
key: Key('goods_edit_item_$index'),
text: '编辑',
fontSize: Dimens.font_sp16,
radius: 24.0,
minWidth: 56.0,
minHeight: 56.0,
padding: const EdgeInsets.symmetric(horizontal: 12.0),
textColor: isDark ? Colours.dark_button_text : Colors.white,
backgroundColor: isDark ? Colours.dark_app_main : Colours.app_main,
onPressed: onTapEdit,
),
MyButton(
key: Key('goods_operation_item_$index'),
text: '下架',
fontSize: Dimens.font_sp16,
radius: 24.0,
minWidth: 56.0,
minHeight: 56.0,
padding: const EdgeInsets.symmetric(horizontal: 12.0),
textColor: Colours.text,
backgroundColor: buttonColor,
onPressed: onTapOperation,
),
MyButton(
key: Key('goods_delete_item_$index'),
text: '删除',
fontSize: Dimens.font_sp16,
radius: 24.0,
minWidth: 56.0,
minHeight: 56.0,
padding: const EdgeInsets.symmetric(horizontal: 12.0),
textColor: Colours.text,
backgroundColor: buttonColor,
onPressed: onTapDelete,
),
Gaps.hGap15,
],
),
),
);
}
}
class _GoodsItemTag extends StatelessWidget {
const _GoodsItemTag({
Key? key,
required this.color,
required this.text,
}): super(key: key);
}) : super(key: key);
final Color? color;
final String text;
@override
Widget build(BuildContext context) {
return Container(
......
......@@ -3,7 +3,6 @@ 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/routers/not_found_page.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';
......@@ -60,92 +59,72 @@ class _HomeState extends State<Home> with RestorationMixin {
OnePoemLocalizations.of(context).profileBottomNavigationBarItemTitle,
];
if (_list == null) {
List<List<LoadAssetImage>> _tabImages;
List<List<Icon>> _tabImages;
if (!isDark) {
_tabImages = [
[
const LoadAssetImage(
'home/icon_order',
width: _imageSize,
color: Colours.unselected_item_color,
const Icon(
Icons.stream,
),
const LoadAssetImage(
'home/icon_order',
width: _imageSize,
color: Colours.app_main,
const Icon(
Icons.stream_outlined,
),
],
[
const LoadAssetImage(
'home/icon_commodity',
width: _imageSize,
color: Colours.unselected_item_color,
const Icon(
Icons.self_improvement_outlined,
),
const LoadAssetImage(
'home/icon_commodity',
width: _imageSize,
color: Colours.app_main,
const Icon(
Icons.self_improvement_outlined,
),
],
[
const LoadAssetImage(
'home/icon_statistics',
width: _imageSize,
color: Colours.unselected_item_color,
],[
const Icon(
Icons.groups,
),
const LoadAssetImage(
'home/icon_statistics',
width: _imageSize,
color: Colours.app_main,
const Icon(
Icons.groups_outlined,
),
],
[
const LoadAssetImage(
'home/icon_shop',
width: _imageSize,
color: Colours.unselected_item_color,
],[
const Icon(
Icons.perm_identity,
),
const LoadAssetImage(
'home/icon_shop',
width: _imageSize,
color: Colours.app_main,
const Icon(
Icons.perm_identity_outlined,
),
]
],
];
} else {
_tabImages = [
[
const LoadAssetImage('home/icon_order', width: _imageSize),
const LoadAssetImage(
'home/icon_order',
width: _imageSize,
color: Colours.dark_app_main,
const Icon(
Icons.stream,
),
],
[
const LoadAssetImage('home/icon_commodity', width: _imageSize),
const LoadAssetImage(
'home/icon_commodity',
width: _imageSize,
color: Colours.dark_app_main,
const Icon(
Icons.stream_outlined,
),
],
[
const LoadAssetImage('home/icon_statistics', width: _imageSize),
const LoadAssetImage(
'home/icon_statistics',
width: _imageSize,
color: Colours.dark_app_main,
const Icon(
Icons.self_improvement_outlined,
),
],
[
const LoadAssetImage('home/icon_shop', width: _imageSize),
const LoadAssetImage(
'home/icon_shop',
width: _imageSize,
color: Colours.dark_app_main,
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) {
......
......@@ -143,7 +143,9 @@ class _PoemPageState extends State<PoemPage> with WidgetsBindingObserver {
onShare: () {},
);
Widget poem = TikTokVidePoem(
desc: "清晨入古寺，初日照高林。\n竹径通幽处，禅房花木深。",
title: "每日一言",
poem: "清晨入古寺，初日照高林。\n曲径通幽处，禅房花木深。\n山光悦鸟性，潭影空人心。\n万籁此都寂，但余钟磬音。\n",
author: "--《题破山寺后禅院》常建",
onShowDetail: () {
tkController.animateToPage(TikTokPagePosition.right);
},
......
......@@ -5,7 +5,8 @@ class Colours {
static const Color dark_app_main = Color(0xFF3F7AE0);
static const Color bg_color = Color(0xfff1f1f1);
static const Color dark_bg_color = Color(0xFF18191A);
// static const Color dark_bg_color = Color(0xFF18191A);
static const Color dark_bg_color = Color(0x00242424);
static const Color material_bg = Color(0xFFFFFFFF);
static const Color dark_material_bg = Color(0xFF303233);
......
......@@ -6,17 +6,14 @@ class TikTokTopInfoColumn extends StatelessWidget {
final String? info;
const TikTokTopInfoColumn({
Key? key,
this.bottomPadding, this.info,
this.bottomPadding,
this.info,
}) : super(key: key);
@override
Widget build(BuildContext context) {
return Container(
width: SysSize.avatar,
margin: EdgeInsets.only(
bottom: bottomPadding ?? 50,
right: 12,
),
margin: const EdgeInsets.all(10.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.end,
crossAxisAlignment: CrossAxisAlignment.end,
......@@ -39,4 +36,4 @@ class TikTokTopInfoColumn extends StatelessWidget {
),
);
}
}
\ No newline at end of file
}
......
import 'dart:ui';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:one_poem/tiktok/style/style.dart';
import 'package:one_poem/res/resources.dart';
class TikTokVidePoem extends StatelessWidget {
final double? bottomPadding;
final Function? onShowDetail;
final String? desc;
final String? poem;
final String? title;
final String? author;
const TikTokVidePoem({
Key? key,
this.bottomPadding,
this.onShowDetail,
this.desc,
this.poem,
this.title,
this.author,
}) : super(key: key);
@override
Widget build(BuildContext context) {
return Container(
width: SysSize.avatar,
margin: EdgeInsets.only(
bottom: bottomPadding ?? 50,
right: 12,
decoration: BoxDecoration(
color: Colors.black.withOpacity(.5),
border: Border.all(color: Colors.grey, width: 0.1), // 边色与边宽度
borderRadius: BorderRadius.circular(2.0),
),
child: Column(
mainAxisAlignment: MainAxisAlignment.end,
crossAxisAlignment: CrossAxisAlignment.end,
children: <Widget>[
InkWell(
height: 220.0,
margin: const EdgeInsets.all(10.0),
child: InkWell(
child: ClipRect(
child: BackdropFilter(
filter: ImageFilter.blur(
sigmaX: 10.0,
sigmaY: 10.0,
),
child: Container(
child: Text(
desc ?? '#一言 临境',
style: StandardTextStyle.normal,
decoration: BoxDecoration(
color: Colors.grey.shade200.withOpacity(0.1),
),
child: Padding(
padding: const EdgeInsets.all(10.0),
child: Column(
children: [
Text(
title ?? '每日一言',
style: const TextStyle(fontSize: 28.0),
),
Gaps.vGap10,
Text(
poem ?? '#一言 临境',
style: const TextStyle(
fontFamily: "ZCOOLXiaoWei", fontSize: 24.0),
),
Text(
author ?? '诗人',
style: const TextStyle(fontSize: 16.0),
),
],
),
),
),
onTap: (){
onShowDetail;
},
),
Container(
width: SysSize.avatar,
height: SysSize.avatar,
margin: const EdgeInsets.only(top: 10),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(SysSize.avatar / 2.0),
// color: Colors.black.withOpacity(0.8),
),
)
],
),
onTap: () {
onShowDetail;
},
),
);
}
}
\ No newline at end of file
}
......
......@@ -74,7 +74,7 @@ class _TimelinesPageState extends State<TimelinesPage>{
Opacity(
opacity: _opacity,
child: const CupertinoNavigationBar(
middle: Text("朋友圈"),
middle: Text("临境|附近|新鲜"),
),
)
......
This diff is collapsed. Click to expand it.
......@@ -168,6 +168,7 @@ flutter:
- assets/images/account/
- assets/images/state/
- assets/images/poem/
- assets/images/category/
- assets/data/Data.json
- assets/data/friends/
......@@ -175,5 +176,12 @@ flutter:
- family: RobotoThin
fonts:
- asset: assets/fonts/Roboto-Thin.ttf
# 开源字体：https://fonts.google.com/
- family: LongCang
fonts:
- asset: assets/fonts/LongCang-Regular.ttf
- family: ZCOOLXiaoWei
fonts:
- asset: assets/fonts/ZCOOLXiaoWei-Regular.ttf
flutter_intl:
enabled: true
\ No newline at end of file
......