diff --git a/assets/iconfont/iconfont.ttf b/assets/iconfont/iconfont.ttf index d3e85c4..542806b 100644 Binary files a/assets/iconfont/iconfont.ttf and b/assets/iconfont/iconfont.ttf differ diff --git a/assets/images/anim_draw.webp b/assets/images/anim_draw.webp new file mode 100644 index 0000000..01bcdae Binary files /dev/null and b/assets/images/anim_draw.webp differ diff --git a/assets/images/base_draw.webp b/assets/images/base_draw.webp new file mode 100644 index 0000000..ad0f866 Binary files /dev/null and b/assets/images/base_draw.webp differ diff --git a/assets/images/draw_bg3.webp b/assets/images/draw_bg3.webp new file mode 100644 index 0000000..e7aa9d0 Binary files /dev/null and b/assets/images/draw_bg3.webp differ diff --git a/assets/images/draw_bg4.webp b/assets/images/draw_bg4.webp new file mode 100644 index 0000000..835d03f Binary files /dev/null and b/assets/images/draw_bg4.webp differ diff --git a/lib/app/res/size_unit.dart b/lib/app/res/size_unit.dart index 7749f33..4702ad5 100644 --- a/lib/app/res/size_unit.dart +++ b/lib/app/res/size_unit.dart @@ -23,4 +23,14 @@ class SizeUnit { // 大文字大小 static const double big_text_size = 22; + + //底栏图标大小 + static const double default_bottom_nav_icon = 24; + static const double active_bottom_nav_icon = 29; + + //底栏高 + static const double bottom_nav_height = 50; + static const double bottom_nav_right_width = 120; + + } diff --git a/lib/app/res/toly_icon.dart b/lib/app/res/toly_icon.dart index e0c79aa..f16b255 100644 --- a/lib/app/res/toly_icon.dart +++ b/lib/app/res/toly_icon.dart @@ -4,8 +4,8 @@ import 'package:flutter/widgets.dart'; class TolyIcon { TolyIcon._(); +static const IconData dingzhi1 = const IconData( 0xe60e, fontFamily: "TolyIcon"); static const IconData icon_collect = const IconData( 0xe672, fontFamily: "TolyIcon"); -static const IconData kujialeqiyezhan_tiaosepan = const IconData( 0xe650, fontFamily: "TolyIcon"); static const IconData yonghu = const IconData( 0xe619, fontFamily: "TolyIcon"); static const IconData icon_common = const IconData( 0xe634, fontFamily: "TolyIcon"); static const IconData icon_see = const IconData( 0xe608, fontFamily: "TolyIcon"); diff --git a/lib/components/permanent/feedback_widget.dart b/lib/components/permanent/feedback_widget.dart index 9141116..b523e5e 100644 --- a/lib/components/permanent/feedback_widget.dart +++ b/lib/components/permanent/feedback_widget.dart @@ -61,6 +61,7 @@ class _FeedBackState extends State @override Widget build(BuildContext context) { return GestureDetector( + behavior: HitTestBehavior.opaque, onLongPress: widget.onLongPressed, onTap: () { _controller.forward(); diff --git a/lib/components/project/items/gallery/gallery_card_item.dart b/lib/components/project/items/gallery/gallery_card_item.dart new file mode 100644 index 0000000..dcade2a --- /dev/null +++ b/lib/components/project/items/gallery/gallery_card_item.dart @@ -0,0 +1,80 @@ +import 'package:flutter/material.dart'; + +/// create by 张风捷特烈 on 2020/11/28 +/// contact me by email 1981462002@qq.com +/// 说明: + +class GalleryCardItem extends StatelessWidget { + final GalleryInfo galleryInfo; + + GalleryCardItem({Key key, this.galleryInfo}) : super(key: key); + + @override + Widget build(BuildContext context) { + return Card( + shape: RoundedRectangleBorder( + // side: BorderSide(width: 1.0, color: Colors.black), + borderRadius: BorderRadius.all(Radius.circular(20))), + child: Container( + height: double.maxFinite, + alignment: Alignment.topCenter, + child: Column( + children: [ + Container( + height: 160, + decoration: BoxDecoration( + image: DecorationImage( + fit: BoxFit.cover, + image: AssetImage(galleryInfo.image)), + color: Colors.green, + borderRadius: BorderRadius.only( + topLeft: Radius.circular(20), + topRight: Radius.circular(20), + )) + // color: Colors.green, + + ), + Align( + alignment: Alignment.topLeft, + child: Padding( + padding: const EdgeInsets.only(left: 15, top: 15), + child: Wrap( + children: [ + Text( + galleryInfo.name, + style: TextStyle(fontSize: 20), + ) + ], + ), + ), + ) + ], + ), + decoration: BoxDecoration( + color: Colors.white, + borderRadius: BorderRadius.all( + Radius.circular(20), + ))), + ); + } +} + +class GalleryInfo { + final int count; + final String name; + final String info; + final String image; + final String router; + + const GalleryInfo( + {this.count = 0, this.name, this.info, this.image, this.router}); + + factory GalleryInfo.fromJson(Map map) { + return GalleryInfo( + count: map['count'] ?? 0, + name: map["name"] ?? "", + image: map["image"] ?? "assets/images/draw_bg4.webp", + router: map["router"] ?? "", + info: map["info"] ?? ""); + } +} diff --git a/lib/views/pages/app/navigation/unit_bottom_bar.dart b/lib/views/pages/app/navigation/unit_bottom_bar.dart index 9929197..365e77d 100644 --- a/lib/views/pages/app/navigation/unit_bottom_bar.dart +++ b/lib/views/pages/app/navigation/unit_bottom_bar.dart @@ -1,4 +1,5 @@ import 'package:flutter/material.dart'; +import 'package:flutter_unit/app/res/size_unit.dart'; import 'package:flutter_unit/app/res/toly_icon.dart'; import 'package:flutter_unit/components/permanent/feedback_widget.dart'; @@ -8,12 +9,10 @@ import 'package:flutter_unit/components/permanent/feedback_widget.dart'; class UnitBottomBar extends StatefulWidget { final Color color; - final Map itemData; final Function(int) onItemClick; UnitBottomBar( {this.color = Colors.blue, - @required this.itemData, @required this.onItemClick}); @override @@ -25,6 +24,16 @@ class _UnitBottomBarState extends State { final NotchedShape shape = const CircularNotchedRectangle(); + final borderTR = const BorderRadius.only( + topRight: Radius.circular(10), + ); + + final borderTL = const BorderRadius.only(topLeft: Radius.circular(10)); + final paddingTR = const EdgeInsets.only(top: 2, right: 2); + final paddingTL = const EdgeInsets.only(top: 2, left: 2); + final paddingL = const EdgeInsets.only(left: 8); + final paddingR = const EdgeInsets.only(right: 8); + @override Widget build(BuildContext context) { return BottomAppBar( @@ -36,117 +45,117 @@ class _UnitBottomBarState extends State { data: IconTheme.of(context).copyWith(color: Colors.white, size: 25), child: Stack( children: [ - Material( - elevation: 0, - shape: RoundedRectangleBorder(borderRadius: borderTR), - child: Container( - margin: paddingTR, - alignment: Alignment.center, - decoration: BoxDecoration( - color: widget.color.withAlpha(88), - borderRadius: borderTR), - height: 50, - width: 120, - child: Row( - mainAxisAlignment: MainAxisAlignment.center, - children: [ - FeedbackWidget( - onPressed: () => _updateIndex(0), - onLongPressed: () => _onLongPress(context, 0), - child: Container( - width: 50, - height: 50, - child: Icon( - TolyIcon.icon_layout, - size: _position == 0 ? 28 : 25, - color: - _position == 0 ? widget.color : Colors.white, - )), - ), - FeedbackWidget( - onPressed: () => _updateIndex(1), - child: Container( - width: 50, - height: 50, - child: Icon( - TolyIcon.kujialeqiyezhan_tiaosepan, - size: _position == 1 ? 28 : 25, - color: - _position == 1 ? widget.color : Colors.white, - )), - ), - ], - ), - ), - ), + _buildLeftBtn(context), Positioned( right: 0, - child: Material( - elevation: 0, - shape: RoundedRectangleBorder(borderRadius: borderTL), - child: Container( - margin: paddingTL, - alignment: Alignment.center, - decoration: BoxDecoration( - color: widget.color.withAlpha(88), - borderRadius: borderTL), - height: 50, - width: 120, - child: Row( - mainAxisAlignment: MainAxisAlignment.center, - children: [ - FeedbackWidget( - onPressed: () => _updateIndex(2), - child: Container( - width: 50, - height: 50, - child: Icon( - TolyIcon.icon_collect, - size: _position == 2 ? 28 : 25, - color: _position == 2 - ? widget.color - : Colors.white, - )), - ), - FeedbackWidget( - onPressed: () => _updateIndex(3), - onLongPressed: () => _onLongPress(context, 1), - child: Container( - width: 50, - height: 50, - child: Icon( - TolyIcon.yonghu, - size: _position == 3 ? 28 : 25, - color: _position == 3 - ? widget.color - : Colors.white, - )), - ), - ], - ), - ), - ), + child: _buildRightBtn(context), ), ], ), )); } + Widget _buildLeftBtn(BuildContext context) => Material( + shape: RoundedRectangleBorder(borderRadius: borderTR), + child: Container( + margin: paddingTR, + alignment: Alignment.center, + decoration: BoxDecoration( + color: widget.color.withAlpha(88), borderRadius: borderTR), + height: SizeUnit.bottom_nav_height, + width: SizeUnit.bottom_nav_right_width, + child: Row( + mainAxisAlignment: MainAxisAlignment.center, + children: [ + Expanded( + child: FeedbackWidget( + onPressed: () => _updateIndex(0), + onLongPressed: () => _onLongPress(context, 0), + child: Container( + padding: paddingL, + height: SizeUnit.bottom_nav_height, + child: Icon( + TolyIcon.icon_layout, + size: iconSize(0), + color: iconColor(0), + )), + ), + ), + Expanded( + child: FeedbackWidget( + onPressed: () => _updateIndex(1), + child: Container( + height: SizeUnit.bottom_nav_height, + padding: paddingR, + child: Icon( + TolyIcon.dingzhi1, + size: iconSize(1), + color: iconColor(1), + )), + ), + ), + ], + ), + ), + ); + + Widget _buildRightBtn(BuildContext context) => Material( + shape: RoundedRectangleBorder(borderRadius: borderTL), + child: Container( + margin: paddingTL, + alignment: Alignment.center, + decoration: BoxDecoration( + color: widget.color.withAlpha(88), borderRadius: borderTL), + height: SizeUnit.bottom_nav_height, + width: SizeUnit.bottom_nav_right_width, + child: Row( + mainAxisAlignment: MainAxisAlignment.center, + children: [ + Expanded( + child: FeedbackWidget( + onPressed: () => _updateIndex(2), + child: Container( + padding: paddingL, + height: SizeUnit.bottom_nav_height, + child: Icon( + TolyIcon.icon_collect, + size: iconSize(2), + color: iconColor(2), + )), + ), + ), + Expanded( + child: FeedbackWidget( + onPressed: () => _updateIndex(3), + onLongPressed: () => _onLongPress(context, 1), + child: Container( + padding: paddingR, + height: SizeUnit.bottom_nav_height, + child: Icon( + TolyIcon.yonghu, + size: iconSize(3), + color: iconColor(3), + )), + ), + ), + ], + ), + ), + ); + + double iconSize(int position) => _position == position + ? SizeUnit.active_bottom_nav_icon + : SizeUnit.default_bottom_nav_icon; + + Color iconColor(int position) => + _position == position ? widget.color : Colors.white; + void _updateIndex(int index) { setState(() { _position = index; widget.onItemClick(_position); }); } - - List get info => widget.itemData.keys.toList(); - - final borderTR = const BorderRadius.only( - topRight: Radius.circular(10), - ); - final borderTL = const BorderRadius.only(topLeft: Radius.circular(10)); - final paddingTR = const EdgeInsets.only(top: 2, right: 2); - final paddingTL = const EdgeInsets.only(top: 2, left: 2); } _onLongPress(BuildContext context, int i) { diff --git a/lib/views/pages/app/navigation/unit_navigation.dart b/lib/views/pages/app/navigation/unit_navigation.dart index dbc2538..afd32a6 100644 --- a/lib/views/pages/app/navigation/unit_navigation.dart +++ b/lib/views/pages/app/navigation/unit_navigation.dart @@ -1,13 +1,11 @@ import 'package:flutter/material.dart'; import 'package:flutter_bloc/flutter_bloc.dart'; -import 'package:flutter_unit/app/res/cons.dart'; import 'package:flutter_unit/app/unit_router.dart'; import 'package:flutter_unit/blocs/bloc_exp.dart'; import 'package:flutter_unit/components/permanent/overlay_tool_wrapper.dart'; import 'package:flutter_unit/views/pages/app/navigation/unit_bottom_bar.dart'; import 'package:flutter_unit/views/pages/category/collect_page.dart'; import 'package:flutter_unit/views/pages/category/home_right_drawer.dart'; -import 'package:flutter_unit/views/pages/gallery/gallery_page.dart'; import 'package:flutter_unit/views/pages/gallery/gallery_unit.dart'; import 'package:flutter_unit/views/pages/me/me_page.dart'; import 'package:flutter_unit/views/pages/widget_home/home_drawer.dart'; @@ -85,12 +83,10 @@ class _UnitNavigationState extends State { BlocBuilder( builder: (_, state) => UnitBottomBar( color: state.color, - itemData: Cons.ICONS_MAP, onItemClick: _onTapBottomNav)); // 点击底部按钮事件，切换页面 _onTapBottomNav(int index) { - print('----_onTapBottomNav-----'); _controller.animateToPage(index, duration: const Duration(milliseconds: 200), curve: Curves.linear); if (index == 2) { diff --git a/lib/views/pages/gallery/gallery_unit.dart b/lib/views/pages/gallery/gallery_unit.dart index 0e871d4..ebb7440 100644 --- a/lib/views/pages/gallery/gallery_unit.dart +++ b/lib/views/pages/gallery/gallery_unit.dart @@ -1,5 +1,10 @@ +import 'dart:convert'; + import 'package:flutter/material.dart'; +import 'package:flutter_bloc/flutter_bloc.dart'; import 'package:flutter_unit/app/res/toly_icon.dart'; +import 'package:flutter_unit/blocs/bloc_exp.dart'; +import 'package:flutter_unit/components/project/items/gallery/gallery_card_item.dart'; /// create by 张风捷特烈 on 2020/11/28 /// contact me by email 1981462002@qq.com @@ -22,16 +27,15 @@ class _GalleryUnitState extends State { void initState() { super.initState(); _position = _position + _firstOffset; - factor.value = ((_position - _firstOffset + 1) % 5) / 5 == 0 - ? 1 - : ((_position - _firstOffset + 1) % 5) / 5; + + double value = ((_position - _firstOffset + 1) % 5) / 5; + factor.value = value == 0 ? 1 : value; _ctrl = PageController( viewportFraction: 0.9, initialPage: _position, )..addListener(() { - factor.value = ((_position - _firstOffset + 1) % 5) / 5 == 0 - ? 1 - : ((_position - _firstOffset + 1) % 5) / 5; + double value = ((_position - _firstOffset + 1) % 5) / 5; + factor.value = value == 0 ? 1 : value; }); } @@ -41,9 +45,9 @@ class _GalleryUnitState extends State { _ctrl.dispose(); } - Color get color => Colors.red; + Color get color => BlocProvider.of(context).state.color; - Color get nextColor => Colors.blue; + Color get nextColor => BlocProvider.of(context).state.nextColor; @override Widget build(BuildContext context) { @@ -76,65 +80,59 @@ class _GalleryUnitState extends State { ); } + final jsonStr = """ +[ + { + "image":"assets/images/anim_draw.webp", + "name":"基础绘制" + }, + { + "image":"assets/images/draw_bg3.webp", + "name":"动画绘制" + }, + { + "image":"assets/images/base_draw.webp", + "name":"手势绘制" + }, + { + "image":"assets/images/draw_bg4.webp", + "name":"趣味绘制" + }, + { + "image":"assets/images/caver.webp", + "name":"艺术画廊" + } +] +"""; + Widget _buildTitle(BuildContext context) { return Container( - alignment: Alignment.center, + alignment: Alignment(0, 0.3), height: MediaQuery.of(context).size.height * 0.25, child: Row( mainAxisSize: MainAxisSize.min, children: [ - Icon( - TolyIcon.kujialeqiyezhan_tiaosepan, - color: Colors.white, - size: 45, + FlutterLogo( + size: 40, ), SizedBox( - width: 20, + width: 10, ), Text( "绘制集录", - style: TextStyle(fontSize: 30, color: Colors.white), + style: TextStyle(fontSize: 26, color: Colors.white), ), ], ), ); } - - final List testWidgets = [ - Container( - decoration: BoxDecoration( - color: Colors.red, - borderRadius: BorderRadius.all( - Radius.circular(20), - ))), - Container( - decoration: BoxDecoration( - color: Colors.yellow, - borderRadius: BorderRadius.all( - Radius.circular(20), - ))), - Container( - decoration: BoxDecoration( - color: Colors.blue, - borderRadius: BorderRadius.all( - Radius.circular(20), - ))), - Container( - decoration: BoxDecoration( - color: Colors.green, - borderRadius: BorderRadius.all( - Radius.circular(20), - ))), - Container( - decoration: BoxDecoration( - color: Colors.orange, - borderRadius: BorderRadius.all( - Radius.circular(20), - ))), - ]; - Widget _buildContent() { + final List widgets = (json.decode(jsonStr) as List) + .map((e) => GalleryCardItem( + galleryInfo: GalleryInfo.fromJson(e), + )) + .toList(); return Container( padding: EdgeInsets.only(bottom: 80, top: 40), @@ -161,9 +159,9 @@ class _GalleryUnitState extends State { transform: Matrix4.diagonal3Values(1.0, value, 1.0), alignment: Alignment.center, child: Padding( - padding: const EdgeInsets.all(8.0), - child: testWidgets[fixPosition( - index, _firstOffset, testWidgets.length)], + padding: const EdgeInsets.all(6.0), + child: widgets[fixPosition( + index, _firstOffset, widgets.length)], ), ), ); @@ -173,7 +171,6 @@ class _GalleryUnitState extends State { onPageChanged: (index) { setState(() => _position = index); }, - // children: children2[fixPosition(realPos, initPos, children2.length)], ), ), _buildDiver(), @@ -182,24 +179,25 @@ class _GalleryUnitState extends State { } Widget _buildDiver() => Container( - margin: EdgeInsets.only(bottom: 12, left: 48, right: 48, top: 10), - height: 2, - child: ValueListenableBuilder( - valueListenable: factor, - builder: (context, value, widget) { - return LinearProgressIndicator( - value: factor.value, - valueColor: AlwaysStoppedAnimation( - Color.lerp( - color, - nextColor, - factor.value, - ), - ), - ); - }, - ), - ); + margin: EdgeInsets.only(bottom: 12, left: 48, right: 48, top: 10), + height: 2, + child: ValueListenableBuilder( + valueListenable: factor, + builder: (context, value, widget) { + return LinearProgressIndicator( + backgroundColor: Colors.black, + value: factor.value, + valueColor: AlwaysStoppedAnimation( + Color.lerp( + color, + nextColor, + factor.value, + ), + ), + ); + }, + ), + ); int fixPosition(int realPos, int initPos, int length) { final int offset = realPos - initPos;