liuxm/FlutterUnit
1
0
Fork 0
forked from lxm_flutter/FlutterUnit
Code Issues Pull Requests Projects Releases Wiki Activity

✨ 更新绘制集录

Browse Source
This commit is contained in:
toly
2020-11-28 22:09:12 +08:00
parent af13bacab2
commit d65734a87b
12 changed files with 269 additions and 175 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
assets/iconfont/iconfont.ttf
View File

Binary file not shown.

BIN
assets/images/anim_draw.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 8.0 KiB

BIN
assets/images/base_draw.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.5 KiB

BIN
assets/images/draw_bg3.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 7.5 KiB

BIN
assets/images/draw_bg4.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 9.3 KiB

10
lib/app/res/size_unit.dart
View File

@@ -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;
}

2
lib/app/res/toly_icon.dart
View File

@@ -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");

1
lib/components/permanent/feedback_widget.dart
View File

@@ -61,6 +61,7 @@ class _FeedBackState extends State<FeedbackWidget>
@override
Widget build(BuildContext context) {
return GestureDetector(
behavior: HitTestBehavior.opaque,
onLongPress: widget.onLongPressed,
onTap: () {
_controller.forward();

80
lib/components/project/items/gallery/gallery_card_item.dart Normal file
View File

@@ -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<String, dynamic> map) {
return GalleryInfo(
count: map['count'] ?? 0,
name: map["name"] ?? "",
image: map["image"] ?? "assets/images/draw_bg4.webp",
router: map["router"] ?? "",
info: map["info"] ?? "");
}
}

207
lib/views/pages/app/navigation/unit_bottom_bar.dart
View File

@@ -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<String, IconData> 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<UnitBottomBar> {
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<UnitBottomBar> {
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<String> 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) {

4
lib/views/pages/app/navigation/unit_navigation.dart
View File

@@ -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<UnitNavigation> {
BlocBuilder<WidgetsBloc, WidgetsState>(
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) {

140
lib/views/pages/gallery/gallery_unit.dart
View File

@@ -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<GalleryUnit> {
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<GalleryUnit> {
_ctrl.dispose();
}
Color get color => Colors.red;
Color get color => BlocProvider.of<WidgetsBloc>(context).state.color;
Color get nextColor => Colors.blue;
Color get nextColor => BlocProvider.of<WidgetsBloc>(context).state.nextColor;
@override
Widget build(BuildContext context) {
@@ -76,65 +80,59 @@ class _GalleryUnitState extends State<GalleryUnit> {
);
}
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<Widget> 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<Widget> 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<GalleryUnit> {
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<GalleryUnit> {
onPageChanged: (index) {
setState(() => _position = index);
},
// children: children2[fixPosition(realPos, initPos, children2.length)],
),
),
_buildDiver(),
@@ -182,24 +179,25 @@ class _GalleryUnitState extends State<GalleryUnit> {
}
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;