OnePoem / OnePoem-App

Go to a project
Toggle navigation Toggle navigation pinning
reason
4bb275a9 1 parent 980bc9a2

update tiktok background

Inline Side-by-side
Showing 3 changed files with 561 additions and 0 deletions
......@@ -2,6 +2,8 @@ import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:one_poem/tiktok/controller/tiktok_video_list_controller.dart';
import 'package:one_poem/tiktok/mock/video.dart';
import 'package:one_poem/tiktok/pages/search_page.dart';
import 'package:one_poem/tiktok/pages/user_page.dart';
import 'package:one_poem/tiktok/style/physics.dart';
import 'package:one_poem/tiktok/views/tiktok_header.dart';
import 'package:one_poem/tiktok/views/tiktok_scaffold.dart';
......@@ -96,10 +98,23 @@ class _PoemPageState extends State<PoemPage> with WidgetsBindingObserver {
},
);
var userPage = UserPage(
isSelfPage: false,
canPop: true,
onPop: () {
tkController.animateToMiddle();
},
);
var searchPage = SearchPage(
onPop: tkController.animateToMiddle,
);
// 组合
return TikTokScaffold(
controller: tkController,
header: header,
leftPage: searchPage,
rightPage: userPage,
enableGesture: true,
page: Stack(
// index: currentPage == null ? 0 : 1,
......
import 'package:flutter/material.dart';
import 'package:one_poem/tiktok/style/style.dart';
import 'package:tapped/tapped.dart';
class SearchPage extends StatefulWidget {
final Function? onPop;
const SearchPage({
Key? key,
this.onPop,
}) : super(key: key);
@override
_SearchPageState createState() => _SearchPageState();
}
class _SearchPageState extends State<SearchPage> {
@override
Widget build(BuildContext context) {
Widget head = Container(
padding: EdgeInsets.only(top: MediaQuery.of(context).padding.top),
color: ColorPlate.back2,
width: double.infinity,
alignment: Alignment.center,
child: Container(
padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12),
child: Row(
children: <Widget>[
const Icon(
Icons.fullscreen,
size: 24,
),
Expanded(
child: Container(
height: 32,
margin: const EdgeInsets.only(right: 20, left: 12),
decoration: BoxDecoration(
color: Colors.white.withOpacity(0.2),
borderRadius: BorderRadius.circular(4),
),
padding: const EdgeInsets.only(left: 12),
child: Opacity(
opacity: 0.3,
child: Row(
children: <Widget>[
const Icon(
Icons.search,
size: 20,
),
Container(
padding: const EdgeInsets.only(left: 2, bottom: 2),
child: const Text(
'搜索内容',
style: StandardTextStyle.normal,
),
)
],
),
),
),
),
Tapped(
child: Text(
'取消',
style: StandardTextStyle.normal.apply(color: ColorPlate.orange),
),
onTap: widget.onPop,
),
],
),
),
);
Widget body = ListView(
padding: EdgeInsets.zero,
children: <Widget>[
const _SearchSelectRow(),
const _SearchSelectRow(),
const Opacity(
opacity: 0.6,
child: SizedBox(
height: 46,
child: Center(child: Text('全部搜索记录')),
),
),
Container(
margin: const EdgeInsets.symmetric(horizontal: 12, vertical: 16),
child: AspectRatio(
aspectRatio: 4.0,
child: Container(
decoration: BoxDecoration(
color: ColorPlate.darkGray,
border: Border.all(color: Colors.black),
borderRadius: BorderRadius.circular(8),
),
alignment: Alignment.center,
child: Text(
'预留轮播图',
style: TextStyle(
color: Colors.white.withOpacity(0.1),
fontSize: 18,
fontWeight: FontWeight.w900,
),
),
),
),
),
],
);
return Scaffold(
body: Container(
color: ColorPlate.back1,
height: double.infinity,
width: double.infinity,
child: Column(
children: <Widget>[
head,
Expanded(child: body),
],
),
),
);
}
}
class _SearchSelectRow extends StatelessWidget {
const _SearchSelectRow({
Key? key,
}) : super(key: key);
@override
Widget build(BuildContext context) {
return Container(
padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 10),
child: Row(
children: <Widget>[
const Icon(
Icons.timelapse,
size: 20,
),
Expanded(
child: Container(
padding: const EdgeInsets.only(left: 8, bottom: 1),
child: const Text(
'搜索唐诗宋词元曲3000首',
style: StandardTextStyle.normal,
),
),
),
const Icon(
Icons.clear,
size: 20,
),
],
),
);
}
}
import 'package:flutter/material.dart';
import 'package:one_poem/tiktok/style/style.dart';
import 'package:tapped/tapped.dart';
import 'package:flutter_gen/gen_l10n/one_poem_localizations.dart';
class UserPage extends StatefulWidget {
final bool canPop;
final bool isSelfPage;
final Function? onPop;
final Function? onSwitch;
const UserPage({
Key? key,
this.canPop = false,
this.onPop,
required this.isSelfPage,
this.onSwitch,
}) : super(key: key);
@override
_UserPageState createState() => _UserPageState();
}
class _UserPageState extends State<UserPage> {
@override
Widget build(BuildContext context) {
Widget likeButton = Container(
color: ColorPlate.back1,
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.end,
children: <Widget>[
Tapped(
child: _UserRightButton(
title: widget.isSelfPage ? '钱包' : '关注',
),
),
],
),
);
Widget avatar = Container(
height: 120 + MediaQuery.of(context).padding.top,
padding: const EdgeInsets.only(left: 18),
alignment: Alignment.bottomLeft,
child: OverflowBox(
alignment: Alignment.bottomLeft,
minHeight: 20,
maxHeight: 300,
child: Container(
height: 74,
width: 74,
margin: const EdgeInsets.only(bottom: 12),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(44),
color: Colors.orange,
border: Border.all(
color: Colors.white,
width: 1,
),
),
child: ClipOval(
child: Image.network(
"https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif",
fit: BoxFit.cover,
),
),
),
),
);
Widget body = ListView(
physics: const BouncingScrollPhysics(
parent: AlwaysScrollableScrollPhysics(),
),
children: <Widget>[
Container(height: 20),
// 头像与关注
Stack(
alignment: Alignment.bottomLeft,
children: <Widget>[likeButton, avatar],
),
Container(
color: ColorPlate.back1,
child: Column(
children: <Widget>[
Container(
padding: const EdgeInsets.only(left: 18),
color: ColorPlate.back1,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
const Text(
'@唐宋八大家TOP8',
style: StandardTextStyle.big,
),
Container(height: 8),
Text(
'朴实无华，且枯燥',
style: StandardTextStyle.smallWithOpacity.apply(
color: Colors.white,
),
),
Container(height: 10),
Row(
children: const <Widget>[
_UserTag(tag: '幽默'),
_UserTag(tag: '机智'),
_UserTag(tag: '枯燥'),
_UserTag(tag: '狮子座'),
],
),
Container(height: 10),
],
),
),
Container(
color: ColorPlate.back1,
padding: const EdgeInsets.symmetric(
horizontal: 8,
vertical: 2,
),
child: Row(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.center,
children: const <Widget>[
TextGroup('356', '关注'),
TextGroup('145万', '粉丝'),
TextGroup('1423万', '获赞'),
],
),
),
Container(
height: 10,
margin: const EdgeInsets.symmetric(horizontal: 12),
decoration: BoxDecoration(
border: Border(
bottom: BorderSide(
color: Colors.white.withOpacity(0.1),
),
),
),
),
const _UserVideoTable(),
],
),
),
],
);
return Container(
decoration: const BoxDecoration(
gradient: LinearGradient(
begin: Alignment.topCenter,
colors: <Color>[
Colors.orange,
Colors.red,
],
),
),
child: Stack(
alignment: Alignment.topCenter,
children: <Widget>[
Container(
margin: const EdgeInsets.only(top: 400),
height: double.infinity,
width: double.infinity,
color: ColorPlate.back1,
),
body,
],
),
);
}
}
class _UserRightButton extends StatelessWidget {
const _UserRightButton({
Key? key,
required this.title,
}) : super(key: key);
final String title;
@override
Widget build(BuildContext context) {
return Container(
padding: const EdgeInsets.symmetric(
vertical: 6,
horizontal: 20,
),
margin: const EdgeInsets.all(8),
alignment: Alignment.center,
child: Text(
title,
style: const TextStyle(color: ColorPlate.orange),
),
decoration: BoxDecoration(
border: Border.all(color: ColorPlate.orange),
borderRadius: BorderRadius.circular(4),
),
);
}
}
class _UserTag extends StatelessWidget {
final String? tag;
const _UserTag({
Key? key,
this.tag,
}) : super(key: key);
@override
Widget build(BuildContext context) {
return Container(
margin: const EdgeInsets.symmetric(horizontal: 4),
padding: const EdgeInsets.symmetric(
vertical: 2,
horizontal: 4,
),
decoration: BoxDecoration(
border: Border.all(
color: Colors.white.withOpacity(0.3),
),
borderRadius: BorderRadius.circular(4),
),
child: Text(
tag ?? '标签',
style: StandardTextStyle.smallWithOpacity,
),
);
}
}
class _UserVideoTable extends StatelessWidget {
const _UserVideoTable({
Key? key,
}) : super(key: key);
@override
Widget build(BuildContext context) {
return Column(
children: <Widget>[
Container(
color: ColorPlate.back1,
padding: const EdgeInsets.symmetric(
vertical: 12,
),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
_PointSelectTextButton(
true,
OnePoemLocalizations.of(context)
.onePoemBottomNavigationBarItemTitle,
),
_PointSelectTextButton(
false,
OnePoemLocalizations.of(context)
.timelineBottomNavigationBarItemTitle),
_PointSelectTextButton(
false,
OnePoemLocalizations.of(context)
.categoryBottomNavigationBarItemTitle),
],
),
),
Row(
children: const <Widget>[
_SmallVideo(),
_SmallVideo(),
_SmallVideo(),
],
),
Row(
children: const <Widget>[
_SmallVideo(),
_SmallVideo(),
_SmallVideo(),
],
),
],
);
}
}
class _SmallVideo extends StatelessWidget {
const _SmallVideo({
Key? key,
}) : super(key: key);
@override
Widget build(BuildContext context) {
return Expanded(
child: AspectRatio(
aspectRatio: 3 / 4.0,
child: Container(
decoration: BoxDecoration(
color: ColorPlate.darkGray,
border: Border.all(color: Colors.black),
),
alignment: Alignment.center,
child: Text(
'一言',
style: TextStyle(
color: Colors.white.withOpacity(0.1),
fontSize: 18,
fontWeight: FontWeight.w900,
),
),
),
),
);
}
}
class _PointSelectTextButton extends StatelessWidget {
final bool isSelect;
final String title;
final Function? onTap;
const _PointSelectTextButton(
this.isSelect,
this.title, {
Key? key,
this.onTap,
}) : super(key: key);
@override
Widget build(BuildContext context) {
return Expanded(
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
isSelect
? Container(
width: 6,
height: 6,
decoration: BoxDecoration(
color: ColorPlate.orange,
borderRadius: BorderRadius.circular(3),
),
)
: Container(),
Container(
padding: const EdgeInsets.only(left: 2),
child: Text(
title,
style: isSelect
? StandardTextStyle.small
: StandardTextStyle.smallWithOpacity,
),
)
],
),
);
}
}
class TextGroup extends StatelessWidget {
final String title, tag;
final Color? color;
const TextGroup(
this.title,
this.tag, {
Key? key,
this.color,
}) : super(key: key);
@override
Widget build(BuildContext context) {
return Container(
padding: const EdgeInsets.symmetric(vertical: 0, horizontal: 8),
child: Row(
crossAxisAlignment: CrossAxisAlignment.end,
children: <Widget>[
Text(
title,
style: StandardTextStyle.big.apply(color: color),
),
Container(width: 4),
Text(
tag,
style: StandardTextStyle.smallWithOpacity.apply(
color: color?.withOpacity(0.6),
),
),
],
),
);
}
}