mirrors/pilipala
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

mod: 首页样式修改

Browse Source
This commit is contained in:
guozhigq
2023-07-16 16:43:45 +08:00
parent a0427c672b
commit eb3017faf4
8 changed files with 126 additions and 75 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
lib/common/constants.dart
View File

@ -2,7 +2,8 @@ import 'package:flutter/material.dart';
class StyleString { class StyleString {
static const double cardSpace = 8; static const double cardSpace = 8;
static BorderRadius mdRadius = BorderRadius.circular(6); static const double safeSpace = 14;
static const Radius imgRadius = Radius.circular(6); static BorderRadius mdRadius = BorderRadius.circular(16);
static const Radius imgRadius = Radius.circular(16);
static const double aspectRatio = 16 / 10; static const double aspectRatio = 16 / 10;
} }

20
lib/common/widgets/video_card_h.dart
View File

@ -57,7 +57,7 @@ class VideoCardH extends StatelessWidget {
child: LayoutBuilder( child: LayoutBuilder(
builder: (context, boxConstraints) { builder: (context, boxConstraints) {
double width = double width =
(boxConstraints.maxWidth - StyleString.cardSpace * 6) / 2; (boxConstraints.maxWidth - StyleString.cardSpace * 9) / 2;
return SizedBox( return SizedBox(
height: width / StyleString.aspectRatio, height: width / StyleString.aspectRatio,
child: Row( child: Row(
@ -104,12 +104,12 @@ class VideoCardH extends StatelessWidget {
}, },
), ),
), ),
Divider( // Divider(
height: 1, // height: 1,
indent: 8, // indent: 8,
endIndent: 12, // endIndent: 12,
color: Theme.of(context).dividerColor.withOpacity(0.08), // color: Theme.of(context).dividerColor.withOpacity(0.08),
) // )
], ],
), ),
), ),
@ -134,8 +134,10 @@ class VideoContent extends StatelessWidget {
videoItem.title, videoItem.title,
textAlign: TextAlign.start, textAlign: TextAlign.start,
style: TextStyle( style: TextStyle(
fontSize: Theme.of(context).textTheme.titleSmall!.fontSize, fontSize: Theme.of(context).textTheme.labelMedium!.fontSize,
fontWeight: FontWeight.w500), fontWeight: FontWeight.w600,
letterSpacing: 0.3,
),
maxLines: 2, maxLines: 2,
overflow: TextOverflow.ellipsis, overflow: TextOverflow.ellipsis,
), ),

57
lib/common/widgets/video_card_v.dart
View File

@ -25,11 +25,11 @@ class VideoCardV extends StatelessWidget {
Widget build(BuildContext context) { Widget build(BuildContext context) {
String heroTag = Utils.makeHeroTag(videoItem.id); String heroTag = Utils.makeHeroTag(videoItem.id);
return Card( return Card(
elevation: 0.8, elevation: 0,
clipBehavior: Clip.hardEdge, clipBehavior: Clip.hardEdge,
shape: RoundedRectangleBorder( // shape: RoundedRectangleBorder(
borderRadius: StyleString.mdRadius, // borderRadius: StyleString.mdRadius,
), // ),
margin: EdgeInsets.zero, margin: EdgeInsets.zero,
child: GestureDetector( child: GestureDetector(
onLongPress: () { onLongPress: () {
@ -51,10 +51,14 @@ class VideoCardV extends StatelessWidget {
}, },
child: Column( child: Column(
children: [ children: [
ClipRRect( Container(
borderRadius: const BorderRadius.only( decoration: const BoxDecoration(
topLeft: StyleString.imgRadius, borderRadius: BorderRadius.only(
topRight: StyleString.imgRadius, topLeft: StyleString.imgRadius,
topRight: StyleString.imgRadius,
bottomLeft: StyleString.imgRadius,
bottomRight: StyleString.imgRadius,
),
), ),
child: AspectRatio( child: AspectRatio(
aspectRatio: StyleString.aspectRatio, aspectRatio: StyleString.aspectRatio,
@ -74,20 +78,20 @@ class VideoCardV extends StatelessWidget {
height: maxHeight, height: maxHeight,
), ),
), ),
Positioned( // Positioned(
left: 0, // left: 0,
right: 0, // right: 0,
bottom: 0, // bottom: 0,
child: AnimatedOpacity( // child: AnimatedOpacity(
opacity: 1, // opacity: 1,
duration: const Duration(milliseconds: 200), // duration: const Duration(milliseconds: 200),
child: VideoStat( // child: VideoStat(
view: videoItem.stat.view, // view: videoItem.stat.view,
danmaku: videoItem.stat.danmaku, // danmaku: videoItem.stat.danmaku,
duration: videoItem.duration, // duration: videoItem.duration,
), // ),
), // ),
), // ),
], ],
); );
}), }),
@ -110,7 +114,7 @@ class VideoContent extends StatelessWidget {
return Expanded( return Expanded(
child: Padding( child: Padding(
// 多列 // 多列
padding: const EdgeInsets.fromLTRB(8, 8, 6, 7), padding: const EdgeInsets.fromLTRB(4, 6, 6, 7),
// 单列 // 单列
// padding: const EdgeInsets.fromLTRB(14, 10, 4, 8), // padding: const EdgeInsets.fromLTRB(14, 10, 4, 8),
child: Column( child: Column(
@ -120,9 +124,10 @@ class VideoContent extends StatelessWidget {
Text( Text(
videoItem.title, videoItem.title,
textAlign: TextAlign.start, textAlign: TextAlign.start,
style: const TextStyle( style: TextStyle(
// fontSize: Theme.of(context).textTheme.titleSmall!.fontSize, fontSize: Theme.of(context).textTheme.labelMedium!.fontSize,
fontSize: 13, fontWeight: FontWeight.w600,
letterSpacing: 0.3,
), ),
maxLines: Get.find<RcmdController>().crossAxisCount, maxLines: Get.find<RcmdController>().crossAxisCount,
overflow: TextOverflow.ellipsis, overflow: TextOverflow.ellipsis,

27
lib/pages/home/controller.dart
View File

@ -6,9 +6,30 @@ import 'package:pilipala/pages/rcmd/index.dart';
class HomeController extends GetxController with GetTickerProviderStateMixin { class HomeController extends GetxController with GetTickerProviderStateMixin {
bool flag = false; bool flag = false;
List tabs = [ List tabs = [
{'label': '直播', 'type': 'live'}, {
{'label': '推荐', 'type': 'rcm'}, 'icon': const Icon(
{'label': '热门', 'type': 'hot'}, Icons.live_tv_outlined,
size: 15,
),
'label': '直播',
'type': 'live'
},
{
'icon': const Icon(
Icons.thumb_up_off_alt_outlined,
size: 15,
),
'label': '推荐',
'type': 'rcm'
},
{
'icon': const Icon(
Icons.whatshot_outlined,
size: 15,
),
'label': '热门',
'type': 'hot'
},
]; ];
int initialIndex = 1; int initialIndex = 1;
late TabController tabController; late TabController tabController;

57
lib/pages/home/view.dart
View File

@ -29,7 +29,7 @@ class _HomePageState extends State<HomePage>
appBar: AppBar( appBar: AppBar(
titleSpacing: 0, titleSpacing: 0,
title: Padding( title: Padding(
padding: const EdgeInsets.only(left: 4, right: 4), padding: const EdgeInsets.only(left: 8, right: 8),
child: Stack( child: Stack(
children: [ children: [
const Align( const Align(
@ -55,26 +55,43 @@ class _HomePageState extends State<HomePage>
splashColor: Colors.transparent, // 点击时的水波纹颜色设置为透明 splashColor: Colors.transparent, // 点击时的水波纹颜色设置为透明
highlightColor: Colors.transparent, // 点击时的背景高亮颜色设置为透明 highlightColor: Colors.transparent, // 点击时的背景高亮颜色设置为透明
), ),
child: TabBar( child: Padding(
controller: _homeController.tabController, padding: const EdgeInsets.only(top: 4),
tabs: [ child: TabBar(
for (var i in _homeController.tabs) Tab(text: i['label']), controller: _homeController.tabController,
], tabs: [
isScrollable: true, for (var i in _homeController.tabs)
indicatorWeight: 0, // Tab(text: i['label'])
indicatorPadding: Padding(
const EdgeInsets.symmetric(horizontal: 3, vertical: 8), padding: const EdgeInsets.symmetric(
indicator: BoxDecoration( horizontal: 0, vertical: 11),
color: Theme.of(context).colorScheme.secondaryContainer, child: Row(
borderRadius: const BorderRadius.all(Radius.circular(20)), children: [
i['icon'],
const SizedBox(width: 4),
Text(i['label'])
],
),
),
],
isScrollable: true,
indicatorWeight: 0,
indicatorPadding: const EdgeInsets.symmetric(
horizontal: 4, vertical: 5),
indicator: BoxDecoration(
color: Theme.of(context).colorScheme.secondaryContainer,
borderRadius:
const BorderRadius.all(Radius.circular(20)),
),
indicatorSize: TabBarIndicatorSize.tab,
labelColor:
Theme.of(context).colorScheme.onSecondaryContainer,
labelStyle: const TextStyle(fontSize: 13),
dividerColor: Colors.transparent,
unselectedLabelColor:
Theme.of(context).colorScheme.outline,
onTap: (value) => {_homeController.initialIndex = value},
), ),
indicatorSize: TabBarIndicatorSize.tab,
labelColor:
Theme.of(context).colorScheme.onSecondaryContainer,
labelStyle: const TextStyle(fontSize: 13),
dividerColor: Colors.transparent,
unselectedLabelColor: Theme.of(context).colorScheme.outline,
onTap: (value) => {_homeController.initialIndex = value},
), ),
), ),
), ),

6
lib/pages/live/view.dart
View File

@ -50,7 +50,7 @@ class _LivePageState extends State<LivePage> {
SliverPadding( SliverPadding(
// 单列布局 EdgeInsets.zero // 单列布局 EdgeInsets.zero
padding: const EdgeInsets.fromLTRB( padding: const EdgeInsets.fromLTRB(
StyleString.cardSpace, 0, StyleString.cardSpace, 8), StyleString.safeSpace, 0, StyleString.safeSpace, 0),
sliver: FutureBuilder( sliver: FutureBuilder(
future: _liveController.queryLiveList('init'), future: _liveController.queryLiveList('init'),
builder: (context, snapshot) { builder: (context, snapshot) {
@ -97,13 +97,13 @@ class _LivePageState extends State<LivePage> {
return SliverGrid( return SliverGrid(
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount( gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
// 行间距 // 行间距
mainAxisSpacing: StyleString.cardSpace, mainAxisSpacing: StyleString.cardSpace + 2,
// 列间距 // 列间距
crossAxisSpacing: StyleString.cardSpace, crossAxisSpacing: StyleString.cardSpace,
// 列数 // 列数
crossAxisCount: ctr.crossAxisCount, crossAxisCount: ctr.crossAxisCount,
mainAxisExtent: mainAxisExtent:
Get.size.width / ctr.crossAxisCount / StyleString.aspectRatio + 70, Get.size.width / ctr.crossAxisCount / StyleString.aspectRatio + 60,
), ),
delegate: SliverChildBuilderDelegate( delegate: SliverChildBuilderDelegate(
(BuildContext context, int index) { (BuildContext context, int index) {

23
lib/pages/live/widgets/live_item.dart
View File

@ -23,11 +23,11 @@ class LiveCardV extends StatelessWidget {
Widget build(BuildContext context) { Widget build(BuildContext context) {
String heroTag = Utils.makeHeroTag(liveItem.roomId); String heroTag = Utils.makeHeroTag(liveItem.roomId);
return Card( return Card(
elevation: 0.8, elevation: 0,
clipBehavior: Clip.hardEdge, clipBehavior: Clip.hardEdge,
shape: RoundedRectangleBorder( // shape: RoundedRectangleBorder(
borderRadius: StyleString.mdRadius, // borderRadius: StyleString.mdRadius,
), // ),
margin: EdgeInsets.zero, margin: EdgeInsets.zero,
child: GestureDetector( child: GestureDetector(
onLongPress: () { onLongPress: () {
@ -52,6 +52,8 @@ class LiveCardV extends StatelessWidget {
borderRadius: const BorderRadius.only( borderRadius: const BorderRadius.only(
topLeft: StyleString.imgRadius, topLeft: StyleString.imgRadius,
topRight: StyleString.imgRadius, topRight: StyleString.imgRadius,
bottomLeft: StyleString.imgRadius,
bottomRight: StyleString.imgRadius,
), ),
child: AspectRatio( child: AspectRatio(
aspectRatio: StyleString.aspectRatio, aspectRatio: StyleString.aspectRatio,
@ -90,15 +92,17 @@ class LiveContent extends StatelessWidget {
return Expanded( return Expanded(
child: Padding( child: Padding(
// 多列 // 多列
padding: const EdgeInsets.fromLTRB(8, 8, 6, 4), padding: const EdgeInsets.fromLTRB(4, 6, 6, 4),
child: Column( child: Column(
crossAxisAlignment: CrossAxisAlignment.start, crossAxisAlignment: CrossAxisAlignment.start,
children: [ children: [
Text( Text(
liveItem.title, liveItem.title,
textAlign: TextAlign.start, textAlign: TextAlign.start,
style: const TextStyle( style: TextStyle(
fontSize: 13, fontSize: Theme.of(context).textTheme.labelMedium!.fontSize,
fontWeight: FontWeight.w600,
letterSpacing: 0.3,
), ),
maxLines: 1, maxLines: 1,
overflow: TextOverflow.ellipsis, overflow: TextOverflow.ellipsis,
@ -111,8 +115,9 @@ class LiveContent extends StatelessWidget {
child: Text( child: Text(
liveItem.uname, liveItem.uname,
textAlign: TextAlign.start, textAlign: TextAlign.start,
style: const TextStyle( style: TextStyle(
fontSize: 13, fontSize:
Theme.of(context).textTheme.labelMedium!.fontSize,
), ),
maxLines: 1, maxLines: 1,
overflow: TextOverflow.ellipsis, overflow: TextOverflow.ellipsis,

6
lib/pages/rcmd/view.dart
View File

@ -53,7 +53,7 @@ class _RcmdPageState extends State<RcmdPage>
padding: _rcmdController.crossAxisCount == 1 padding: _rcmdController.crossAxisCount == 1
? EdgeInsets.zero ? EdgeInsets.zero
: const EdgeInsets.fromLTRB( : const EdgeInsets.fromLTRB(
StyleString.cardSpace, 0, StyleString.cardSpace, 8), StyleString.safeSpace, 0, StyleString.safeSpace, 0),
sliver: FutureBuilder( sliver: FutureBuilder(
future: _rcmdController.queryRcmdFeed('init'), future: _rcmdController.queryRcmdFeed('init'),
builder: (context, snapshot) { builder: (context, snapshot) {
@ -99,13 +99,13 @@ class _RcmdPageState extends State<RcmdPage>
return SliverGrid( return SliverGrid(
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount( gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
// 行间距 // 行间距
mainAxisSpacing: StyleString.cardSpace, mainAxisSpacing: StyleString.cardSpace + 2,
// 列间距 // 列间距
crossAxisSpacing: StyleString.cardSpace, crossAxisSpacing: StyleString.cardSpace,
// 列数 // 列数
crossAxisCount: ctr.crossAxisCount, crossAxisCount: ctr.crossAxisCount,
mainAxisExtent: mainAxisExtent:
Get.size.width / ctr.crossAxisCount / StyleString.aspectRatio + 70, Get.size.width / ctr.crossAxisCount / StyleString.aspectRatio + 60,
), ),
delegate: SliverChildBuilderDelegate( delegate: SliverChildBuilderDelegate(
(BuildContext context, int index) { (BuildContext context, int index) {