OnePoem / OnePoem-App

Go to a project
Toggle navigation Toggle navigation pinning
reason
77fab504 1 parent e75743fe

update styles

Inline Side-by-side
Showing 5 changed files with 323 additions and 159 deletions
......@@ -9,7 +9,6 @@ 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/util/toast_utils.dart';
import 'package:one_poem/widgets/bars/home_action_bar.dart';
import 'package:one_poem/widgets/my_app_bar.dart';
import 'package:video_player/video_player.dart';
......
......@@ -66,6 +66,7 @@ class TikTokVidePoem extends StatelessWidget {
fontSize: 20.px),
),
Container(
padding: EdgeInsets.only(right: 5.px),
alignment: Alignment.centerRight,
width: double.infinity,
child: Text(
......
......@@ -5,7 +5,8 @@ import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:one_poem/timeline/models/friend_entity.dart';
import 'package:one_poem/timeline/widgets/friend_cell.dart';
import 'package:one_poem/timeline/widgets/header_view.dart';
import 'package:one_poem/widgets/bars/timeline_menu_bar.dart';
import 'package:one_poem/widgets/my_app_bar.dart';
class TimelinesPage extends StatefulWidget {
const TimelinesPage({Key? key}) : super(key: key);
......@@ -14,11 +15,11 @@ class TimelinesPage extends StatefulWidget {
_TimelinesPageState createState() => _TimelinesPageState();
}
class _TimelinesPageState extends State<TimelinesPage>{
class _TimelinesPageState extends State<TimelinesPage> {
final ScrollController _scrollController = ScrollController();
double _opacity = 0;
FriendEntity _friendmodelEntity = FriendEntity();
FriendEntity _friendModelEntity = FriendEntity();
Future<String> loadAsset() async {
return await rootBundle.loadString('assets/data/Data.json');
......@@ -28,59 +29,51 @@ class _TimelinesPageState extends State<TimelinesPage>{
void initState() {
super.initState();
loadAsset().then((value){
loadAsset().then((value) {
var json = jsonDecode(value);
_friendmodelEntity = FriendEntity.fromJson(json);
_friendModelEntity = FriendEntity.fromJson(json);
setState(() {});
});
_scrollController.addListener(() {
double alph = _scrollController.offset/200;
if (alph < 0) {
alph = 0;
} else if (alph > 1) {
alph = 1;
double alpha = _scrollController.offset / 200;
if (alpha < 0) {
alpha = 0;
} else if (alpha > 1) {
alpha = 1;
}
setState(() {
_opacity = alph;
_opacity = alpha;
});
});
}
Widget _mainListViewBuidler(BuildContext context , int index) {
return FriendCell(model: _friendmodelEntity.data[index],);
Widget _mainListViewBuilder(BuildContext context, int index) {
return FriendCell(
model: _friendModelEntity.data[index],
);
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: Stack(
children: <Widget>[
ListView(
appBar: const MyAppBar(
isBack: false,
isTransparent: true,
homeMenuHeader: TimelineMenuHeader(),
),
body: ListView(
padding: const EdgeInsets.only(top: 0),
controller: _scrollController,
children: <Widget>[
const HeaderView(),
ListView.builder(padding: const EdgeInsets.only(top: 0), itemBuilder: _mainListViewBuidler , itemCount: _friendmodelEntity.data.length, shrinkWrap: true, physics:NeverScrollableScrollPhysics(),)
],
),
Opacity(
opacity: _opacity,
child: const CupertinoNavigationBar(
middle: Text("临境|附近|新鲜"),
),
ListView.builder(
padding: const EdgeInsets.only(top: 0),
itemBuilder: _mainListViewBuilder,
itemCount: _friendModelEntity.data.length,
shrinkWrap: true,
physics: const NeverScrollableScrollPhysics(),
)
],
),
);
}
......
......@@ -2,46 +2,59 @@ import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:one_poem/timeline/models/friend_entity.dart';
class FriendCell extends StatefulWidget {
import 'package:one_poem/extension/int_extension.dart';
FriendData model;
class FriendCell extends StatefulWidget {
final FriendData model;
FriendCell({Key? key, required this.model}) : super(key: key);
const FriendCell({Key? key, required this.model}) : super(key: key);
@override
State<StatefulWidget> createState() {
// TODO: implement createState
return FriendCellState();
}
}
class FriendCellState extends State<FriendCell> {
class FriendCellState extends State<FriendCell> {
Widget? makePictureCount(List<String> pics) {
if (pics.length == 1) {
return Container(
margin: EdgeInsets.fromLTRB(0, 10, 50, 10),
child: Image.asset("assets/data/friends/" + pics[0] , fit: BoxFit.fill,),
margin: EdgeInsets.fromLTRB(0.px, 10.px, 50.px, 10.px),
child: Image.asset(
"assets/data/friends/" + pics[0],
fit: BoxFit.fill,
),
);
} else if (pics.length == 4 || pics.length == 2) {
return Container(
margin: EdgeInsets.fromLTRB(0, 10, 0, 10),
margin: EdgeInsets.fromLTRB(0.px, 10.px, 0.px, 10.px),
child: Wrap(
spacing: 5,
runSpacing: 5,
alignment: WrapAlignment.start,
children: pics.map((p) => Image.asset("assets/data/friends/" + p , width: 100 , height: 100 , fit: BoxFit.cover,)).toList()
)
);
children: pics
.map((p) => Image.asset(
"assets/data/friends/" + p,
width: 100.px,
height: 100.px,
fit: BoxFit.cover,
))
.toList()));
} else if (pics.length == 3 || pics.length > 4) {
return Container(
margin: EdgeInsets.fromLTRB(0, 10, 0, 10),
margin: EdgeInsets.fromLTRB(0.px, 10.px, 0.px, 10.px),
child: Wrap(
spacing: 5,
runSpacing: 5,
alignment: WrapAlignment.start,
children: pics.map((p) => Image.asset("assets/data/friends/" + p , width: 70 , height: 70 , fit: BoxFit.cover,)).toList()
)
);
children: pics
.map((p) => Image.asset(
"assets/data/friends/" + p,
width: 70.px,
height: 70.px,
fit: BoxFit.cover,
))
.toList(),
));
}
}
......@@ -50,9 +63,8 @@ class FriendCellState extends State<FriendCell> {
@override
Widget build(BuildContext context) {
// TODO: implement build
return Container(
color: Color(0XFFFEFFFE),
color: const Color(0XFFFEFFFE),
child: Column(
children: <Widget>[
Flex(
......@@ -60,33 +72,42 @@ class FriendCellState extends State<FriendCell> {
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Container(
width: 40,
height: 40,
margin: EdgeInsets.fromLTRB(15, 20, 15, 0),
width: 40.px,
height: 40.px,
margin: EdgeInsets.fromLTRB(15.px, 20.px, 15.px, 0.px),
child: ClipRRect(
child: Image.asset("assets/data/friends/" + widget.model.head , fit: BoxFit.fill,),
borderRadius: BorderRadius.circular(5),
child: Image.asset(
"assets/data/friends/" + widget.model.head,
fit: BoxFit.fill,
),
borderRadius: BorderRadius.circular(5.px),
),
),
Expanded(
child: Container(
margin: EdgeInsets.fromLTRB(0, 20, 70, 0),
margin: EdgeInsets.fromLTRB(0.px, 20.px, 70.px, 0.px),
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(widget.model.name , style: TextStyle(fontSize: 17 , color: Color(0XFF566B94) , fontWeight: FontWeight.w500),),
SizedBox(height: 5,),
Text(widget.model.desc , style: TextStyle(fontSize: 15),),
Text(
widget.model.name,
style: TextStyle(
fontSize: 17.px,
color: const Color(0XFF566B94),
fontWeight: FontWeight.w500),
),
SizedBox(
height: 5.px,
),
Text(
widget.model.desc,
style: TextStyle(fontSize: 15.px),
),
makePictureCount(widget.model.pics)!,
],
)
)
)
)))
],
),
Flex(
......@@ -96,136 +117,216 @@ class FriendCellState extends State<FriendCell> {
Expanded(
flex: 1,
child: Container(
margin: EdgeInsets.only(left: 70),
child: Text(widget.model.time , style: TextStyle(fontSize: 12 , color: Color(0XFFB2B2B2)),),
margin: EdgeInsets.only(left: 70.px),
child: Text(
widget.model.time,
style: TextStyle(
fontSize: 12.px,
color: const Color(0XFFB2B2B2),
),
),
),
),
Expanded(
flex: 2,
child: Container(
margin: EdgeInsets.only(right: 20),
margin: EdgeInsets.only(right: 20.px),
child: Row(
mainAxisAlignment: MainAxisAlignment.end,
children: <Widget>[
AnimatedContainer(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(5),
color: Color(0XFF4C5154)
),
duration: Duration(milliseconds: 100),
borderRadius: BorderRadius.circular(5.px),
color: const Color(0XFF4C5154)),
duration: const Duration(milliseconds: 100),
width: _width,
height: 30,
height: 30.px,
child: Flex(
direction: Axis.horizontal,
children: <Widget>[
Expanded(
flex : 1 ,
flex: 1,
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
mainAxisAlignment:
MainAxisAlignment.center,
children: <Widget>[
Icon(Icons.favorite_border , color: Colors.white, size: 15,),
SizedBox(width: 5,),
Icon(
Icons.favorite_border,
color: Colors.white,
size: 15.px,
),
SizedBox(
width: 5.px,
),
InkWell(
onTap: (){
onTap: () {
setState(() {
_starCount ++ ;
_starCount++;
isShow();
});
},
child: Text("赞" ,style: TextStyle(color: Colors.white , fontSize: 12),)
)
],
)
child: Text(
"荐",
style: TextStyle(
color: Colors.white,
fontSize: 12.px,
),
))
],
)),
Expanded(
flex: 1,
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
mainAxisAlignment:
MainAxisAlignment.center,
children: <Widget>[
Icon(Icons.sms , color: Colors.white, size: 15,),
SizedBox(width: 5,),
Icon(
Icons.sms,
color: Colors.white,
size: 15.px,
),
SizedBox(
width: 5.px,
),
InkWell(
onTap: () {
setState(() {
_talkCount ++ ;
_talkCount++;
isShow();
});
},
child: Text("评论" ,style: TextStyle(color: Colors.white , fontSize: 12),)
)
child: Text(
"避",
style: TextStyle(
color: Colors.white,
fontSize: 12.px,
),
))
],
)
)
)),
Expanded(
flex: 1,
child: Row(
mainAxisAlignment:
MainAxisAlignment.center,
children: <Widget>[
Icon(
Icons.sms,
color: Colors.white,
size: 15.px,
),
SizedBox(
width: 5.px,
),
InkWell(
onTap: () {
setState(() {
_talkCount++;
isShow();
});
},
child: Text(
"藏",
style: TextStyle(
color: Colors.white,
fontSize: 12.px,
),
))
],
)
)),
Expanded(
flex: 1,
child: Row(
mainAxisAlignment:
MainAxisAlignment.center,
children: <Widget>[
Icon(
Icons.sms,
color: Colors.white,
size: 15.px,
),
SizedBox(
width: 5.px,
),
SizedBox(width: 10,),
InkWell(
onTap: (){
onTap: () {
setState(() {
_talkCount++;
isShow();
});
},
child: Image.asset("assets/data/friends/button.png" , width: 22, height: 18,)
child: Text(
"评",
style: TextStyle(
color: Colors.white,
fontSize: 12.px,
),
))
],
)),
],
)),
SizedBox(
width: 10.px,
),
)
)
InkWell(
onTap: () {
isShow();
},
child: Image.asset(
"assets/data/friends/button.png",
width: 22.px,
height: 18.px,
)),
],
),
))
],
),
Offstage(
offstage: _starCount == 0 ? true : false,
child: Container(
constraints: BoxConstraints(
minWidth: double.infinity
),
margin: EdgeInsets.fromLTRB(70, 10, 15, 0),
padding: EdgeInsets.all(5),
color: Color(0XFFF3F3F5),
constraints: const BoxConstraints(minWidth: double.infinity),
margin: EdgeInsets.fromLTRB(70.px, 10.px, 15.px, 0.px),
padding: EdgeInsets.all(5.px),
color: const Color(0XFFF3F3F5),
child: Wrap(
alignment: WrapAlignment.start,
runSpacing: 5,
spacing: 5,
children:likeView(_starCount)
),
runSpacing: 5.px,
spacing: 5.px,
children: likeView(_starCount)),
),
),
Offstage(
offstage: _talkCount == 0 ? true : false,
child: Container(
constraints: BoxConstraints(
minWidth: double.infinity
),
margin: EdgeInsets.fromLTRB(70, 0, 15, 0),
padding: EdgeInsets.all(5),
color: Color(0XFFF3F3F5),
constraints: const BoxConstraints(minWidth: double.infinity),
margin: EdgeInsets.fromLTRB(70.px, 0.px, 15.px, 0.px),
padding: EdgeInsets.all(5.px),
color: const Color(0XFFF3F3F5),
child: Wrap(
alignment: WrapAlignment.start,
runSpacing: 5,
spacing: 5,
children:talkView(_talkCount)
runSpacing: 5.px,
spacing: 5.px,
children: talkView(_talkCount)),
),
),
SizedBox(
height: 10.px,
),
SizedBox(height: 10,),
Container(height: 0.5, width: double.infinity, color: Colors.black26,)
],
Container(
height: 0.5,
width: double.infinity,
color: Colors.black26,
)
);
],
));
}
void isShow() {
_isShow = !_isShow;
setState(() {
_width = _isShow ? 120 : 0;
_width = _isShow ? 160.px : 0.px;
});
}
......@@ -233,16 +334,27 @@ class FriendCellState extends State<FriendCell> {
var _talkCount = 0;
List<Widget> likeView(int count) {
List<Widget> result = [];
for (int i =0 ; i< count ; i ++) {
result.add(Container(
width: 70,
for (int i = 0; i < count; i++) {
result.add(SizedBox(
width: 70.px,
child: Row(
children: <Widget>[
Icon(Icons.favorite_border , size: 13, color: Color(0XFF566B94),),
SizedBox(width: 5,),
Text("sunnytu" ,style: TextStyle(color: Color(0XFF566B94) , fontSize: 15 , fontWeight: FontWeight.w500),)
Icon(
Icons.favorite_border,
size: 13.px,
color: const Color(0XFF566B94),
),
SizedBox(
width: 5.px,
),
Text(
"sunnytu",
style: TextStyle(
color: const Color(0XFF566B94),
fontSize: 15.px,
fontWeight: FontWeight.w500),
)
],
),
));
......@@ -252,38 +364,30 @@ class FriendCellState extends State<FriendCell> {
}
List<Widget> talkView(int count) {
List<Widget> result = [];
for (int i =0 ; i< count ; i ++) {
result.add(Container(
child: Row(
for (int i = 0; i < count; i++) {
result.add(Row(
children: <Widget>[
Expanded(
child: Text.rich(
TextSpan(
children: [
TextSpan(children: [
TextSpan(
text: "sunnytu：",
style: TextStyle(fontSize: 15 ,fontWeight: FontWeight.w500 , color: Color(0XFF566B94))
),
style: TextStyle(
fontSize: 15.px,
fontWeight: FontWeight.w500,
color: const Color(0XFF566B94))),
TextSpan(
text: "66666",
style: TextStyle(fontSize: 14),
style: TextStyle(fontSize: 14.px),
)
]
),
]),
textAlign: TextAlign.start,
)
),
)),
],
),
));
}
return result;
}
}
......
import 'package:flutter/material.dart';
class TimelineMenuHeader extends StatelessWidget {
const TimelineMenuHeader({
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),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
mainAxisSize: MainAxisSize.min,
//交叉轴的布局方式，对于column来说就是水平方向的布局方式
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
SizedBox(
width: 60.0,
child: TextButton(
onPressed: () => funcLeft!(),
child: const Text(
"临境",
style: TextStyle(color: Colors.black54),
),
),
),
const VerticalDivider(
color: Colors.black54,
width: 1.0,
thickness: 1.0,
indent: 16.0,
endIndent: 16.0,
),
TextButton(
onPressed: () => funcCenter!(),
child: const Text(
"附近",
style: TextStyle(color: Colors.black54),
),
),
const VerticalDivider(
color: Colors.black54,
width: 1.0,
thickness: 1.0,
indent: 15.0,
endIndent: 15.0,
),
TextButton(
onPressed: () => funcRight!(),
child: const Text(
"新鲜",
style: TextStyle(color: Colors.black54),
),
),
],
));
}
}