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

✨ item样式切换支持优化

Browse Source
This commit is contained in:
toly
2020-04-28 19:01:09 +08:00
parent b4d1f78f8e
commit 548199cfba
5 changed files with 191 additions and 160 deletions
Download Patch File Download Diff File Expand all files Collapse all files

119
lib/views/items/coupon_widget_list_item.dart
View File

@@ -14,65 +14,78 @@ class CouponWidgetListItem extends StatelessWidget {
final WidgetModel data;
final bool hasTopHole;
final bool hasBottomHole;
final bool isClip;
CouponWidgetListItem(
{this.data, this.hasTopHole = true, this.hasBottomHole = false});
{this.data,
this.hasTopHole = true,
this.hasBottomHole = false,
this.isClip = true});
final List<int> colors = Cons.tabColors;
@override
Widget build(BuildContext context) {
return Stack(
children: <Widget>[
ClipPath(
clipper: ShapeBorderClipper(
shape: CouponShapeBorder(
hasTopHole: hasTopHole,
hasBottomHole: hasBottomHole,
hasLine: false,
edgeRadius: 25,
lineRate: 0.20)),
child: Container(
color: Color(colors[data.family.index]).withAlpha(66),
height: 95,
padding: EdgeInsets.only(top: 10, left: 10, right: 10, bottom: 5),
child: Row(
children: <Widget>[
Padding(
padding: const EdgeInsets.all(5.0),
child: Hero(
tag: "hero_widget_image_${data.id}",
child: data.image == null
? Material(
color: Colors.transparent,
child: CircleText(
text: data.name,
size: 60,
color: invColor,
),
)
: CircleImage(
image: data.image,
size: 60,
),
),
),
Expanded(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[_buildTitle(), _buildSummary()],
),
),
],
),
),
),
_buildCollectTag(Theme.of(context).primaryColor)
],
return Container(
margin: EdgeInsets.symmetric(horizontal: 15, vertical: 8),
child: Stack(
children: <Widget>[
isClip
? ClipPath(
clipper: ShapeBorderClipper(
shape: CouponShapeBorder(
hasTopHole: hasTopHole,
hasBottomHole: hasBottomHole,
hasLine: false,
edgeRadius: 25,
lineRate: 0.20)),
child: buildContent(),
)
: buildContent(),
_buildCollectTag(Theme.of(context).primaryColor)
],
),
);
}
Widget buildContent() => Container(
color: Color(colors[data.family.index]).withAlpha(66),
height: 95,
padding: EdgeInsets.only(top: 10, left: 10, right: 10, bottom: 5),
child: Row(
children: <Widget>[
buildLeading(),
Expanded(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[_buildTitle(), _buildSummary()],
),
),
],
),
);
Widget buildLeading() => Padding(
padding: const EdgeInsets.all(5.0),
child: Hero(
tag: "hero_widget_image_${data.id}",
child: data.image == null
? Material(
color: Colors.transparent,
child: CircleText(
text: data.name,
size: 60,
color: invColor,
),
)
: CircleImage(
image: data.image,
size: 60,
),
),
);
Color get invColor {
return Color(colors[data.family.index]);
}
@@ -80,18 +93,18 @@ class CouponWidgetListItem extends StatelessWidget {
Widget _buildCollectTag(Color color) {
return Positioned(
top: 0,
left: 20,
right: 40,
child: BlocBuilder<CollectBloc, CollectState>(builder: (_, s) {
var show = s.widgets.contains(data);
return Opacity(
opacity: show ? 1.0 : 0.0,
child: SizedOverflowBox(
alignment: Alignment.bottomCenter,
size: Size(0, 30 - 8.0),
size: Size(0, 20 - 6.0),
child: Tag(
color: color,
shadowHeight: 8.0,
size: Size(20, 30),
shadowHeight: 6.0,
size: Size(15, 20),
),
),
);

57
lib/views/items/home_item_support.dart Normal file
View File

@@ -0,0 +1,57 @@
import 'dart:math';
import 'package:flutter/material.dart';
import 'package:flutter_unit/app/enums.dart';
import 'package:flutter_unit/model/widget_model.dart';
import 'coupon_widget_list_item.dart';
import 'techno_widget_list_item.dart';
/// create by 张风捷特烈 on 2020/4/28
/// contact me by email 1981462002@qq.com
/// 说明:
class HomeItemSupport {
static Widget get(
WidgetModel model,
int index,
) {
switch (index) {
case 0:
return TechnoWidgetListItem(data: model);
case 1:
return TechnoWidgetListItem(data: model, isClip: false);
case 2:
return CouponWidgetListItem(data: model);
case 3:
return CouponWidgetListItem(hasTopHole: false, data: model);
case 4:
return CouponWidgetListItem(
hasTopHole: true, hasBottomHole: true, data: model);
case 5:
return CouponWidgetListItem(isClip: false, data: model);
}
return TechnoWidgetListItem(data: model);
}
static List<Widget> itemSimples() => [
TechnoWidgetListItem(data: getContainer()),
TechnoWidgetListItem(
data: getContainer(),
isClip: false,
),
CouponWidgetListItem(data: getContainer()),
CouponWidgetListItem(hasTopHole: false, data: getContainer()),
CouponWidgetListItem(
hasTopHole: true, hasBottomHole: true, data: getContainer()),
CouponWidgetListItem(isClip: false, data: getContainer()),
];
static WidgetModel getContainer() => WidgetModel(
id: Random().nextInt(10000),
name: 'Container',
nameCN: "",
lever: 5,
family: WidgetFamily.statelessWidget,
info: '用于容纳单个子组件的容器组件。集成了若干个单子组件的功能，如内外边距、形变、装饰、约束等...');
}

111
lib/views/items/techno_widget_list_item.dart
View File

@@ -13,50 +13,58 @@ import 'package:flutter_unit/model/widget_model.dart';
class TechnoWidgetListItem extends StatelessWidget {
final WidgetModel data;
TechnoWidgetListItem({this.data});
final bool isClip ;
TechnoWidgetListItem({
this.data,
this.isClip = true
});
@override
Widget build(BuildContext context) {
return Stack(
children: <Widget>[
Material(
color: itemColor.withAlpha(66),
shape: TechnoShapeBorder(color: itemColor),
child: Container(
height: 95,
padding: EdgeInsets.only(top: 10, left: 10, right: 10, bottom: 5),
child: Row(
children: <Widget>[
Wrap(
spacing: 5,
direction: Axis.vertical,
alignment: WrapAlignment.center,
crossAxisAlignment: WrapCrossAlignment.center,
children: <Widget>[
_buildLeading(),
StarScore(
star: Star(
emptyColor: Colors.white,
size: 12,
fillColor: itemColor),
score: data.lever,
)
],
),
Expanded(
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[_buildTitle(), _buildSummary()],
return Container(
margin: EdgeInsets.symmetric(horizontal: 15, vertical: 8),
child: Stack(
children: <Widget>[
Material(
color: itemColor.withAlpha(66),
shape: isClip?TechnoShapeBorder(color: itemColor):null,
child: Container(
height: 95,
padding: EdgeInsets.only(top: 10, left: 10, right: 10, bottom: 5),
child: Row(
children: <Widget>[
Wrap(
spacing: 5,
direction: Axis.vertical,
alignment: WrapAlignment.center,
crossAxisAlignment: WrapCrossAlignment.center,
children: <Widget>[
Hero(
tag: "hero_widget_image_${data.id}",
child: _buildLeading()),
StarScore(
star: Star(
emptyColor: Colors.white,
size: 12,
fillColor: itemColor),
score: data.lever,
)
],
),
),
],
Expanded(
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[_buildTitle(), _buildSummary()],
),
),
],
),
),
),
),
_buildCollectTag(Theme.of(context).primaryColor)
],
_buildCollectTag(Theme.of(context).primaryColor)
],
),
);
}
@@ -83,22 +91,19 @@ class TechnoWidgetListItem extends StatelessWidget {
Widget _buildLeading() => Padding(
padding: const EdgeInsets.only(left: 5, right: 5),
child: Hero(
tag: "hero_widget_image_${data.id}",
child: data.image == null
? Material(
color: Colors.transparent,
child: CircleText(
text: data.name,
size: 60,
color: itemColor,
),
)
: CircleImage(
image: data.image,
size: 55,
child: data.image == null
? Material(
color: Colors.transparent,
child: CircleText(
text: data.name,
size: 60,
color: itemColor,
),
),
)
: CircleImage(
image: data.image,
size: 55,
),
);
Color get itemColor => Color(Cons.tabColors[data.family.index]);

31
lib/views/pages/home/home_page.dart
View File

@@ -9,6 +9,7 @@ import 'package:flutter_unit/components/permanent/feedback_widget.dart';
import 'package:flutter_unit/model/widget_model.dart';
import 'package:flutter_unit/views/common/empty_page.dart';
import 'package:flutter_unit/views/items/coupon_widget_list_item.dart';
import 'package:flutter_unit/views/items/home_item_support.dart';
import 'package:flutter_unit/views/items/techno_widget_list_item.dart';
import 'package:flutter_unit/views/pages/home/toly_app_bar.dart';
@@ -57,13 +58,10 @@ class _HomePageState extends State<HomePage> {
if (items.isEmpty) return EmptyPage();
return ListView.builder(
controller: _ctrl,
itemBuilder: (_, index) => Container(
margin: EdgeInsets.symmetric(horizontal: 15, vertical: 8),
child: FeedbackWidget(
itemBuilder: (_, index) => FeedbackWidget(
duration: Duration(milliseconds: 200),
onPressed: () => _toDetailPage(items[index]),
child: _mapItemByType(items[index])),
),
itemCount: items.length);
}
if (state is WidgetsLoadFailed) {
@@ -76,30 +74,7 @@ class _HomePageState extends State<HomePage> {
Widget _mapItemByType(WidgetModel model) {
var index = BlocProvider.of<GlobalBloc>(context).state.itemStyleIndex;
switch (index) {
case 0:
return TechnoWidgetListItem(
data: model,
);
case 1:
return CouponWidgetListItem(
data: model,
);
case 2:
return CouponWidgetListItem(
hasTopHole: false,
data: model,
);
case 3:
return CouponWidgetListItem(
hasTopHole: true,
hasBottomHole: true,
data: model,
);
}
return TechnoWidgetListItem(
data: model,
);
return HomeItemSupport.get(model, index);
}
_updateAppBarHeight() {

33
lib/views/pages/setting/item_style_setting.dart
View File

@@ -2,20 +2,17 @@ import 'dart:math';
import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:flutter_unit/app/enums.dart';
import 'package:flutter_unit/app/res/cons.dart';
import 'package:flutter_unit/blocs/global/global_bloc.dart';
import 'package:flutter_unit/blocs/global/global_event.dart';
import 'package:flutter_unit/blocs/global/global_state.dart';
import 'package:flutter_unit/components/permanent/feedback_widget.dart';
import 'package:flutter_unit/components/permanent/circle.dart';
import 'package:flutter_unit/model/widget_model.dart';
import 'package:flutter_unit/views/items/coupon_widget_list_item.dart';
import 'package:flutter_unit/views/items/techno_widget_list_item.dart';
import 'package:flutter_unit/views/items/home_item_support.dart';
/// create by 张风捷特烈 on 2020-04-10
/// contact me by email 1981462002@qq.com
/// 说明:
/// 说明: item样式切换支持
class ItemStyleSettingPage extends StatelessWidget {
@override
@@ -31,28 +28,12 @@ class ItemStyleSettingPage extends StatelessWidget {
);
}
final items = [
TechnoWidgetListItem(data: getContainer()),
CouponWidgetListItem(data: getContainer()),
CouponWidgetListItem(hasTopHole: false, data: getContainer()),
CouponWidgetListItem(
hasTopHole: true, hasBottomHole: true, data: getContainer()),
];
static WidgetModel getContainer() => WidgetModel(
id: Random().nextInt(10000),
name: 'Container',
nameCN: "",
lever: 5,
family: WidgetFamily.statelessWidget,
info: '用于容纳单个子组件的容器组件。集成了若干个单子组件的功能，如内外边距、形变、装饰、约束等...');
get items=> HomeItemSupport.itemSimples();
Widget _buildFontCell(BuildContext context, int index) {
return ListView.builder(
itemCount: items.length,
itemBuilder: (_, i) => Padding(
padding: EdgeInsets.only(left: 20, top: 20, right: 20),
child: FeedbackWidget(
itemBuilder: (_, i) => FeedbackWidget(
a: 0.95,
duration: Duration(milliseconds: 200),
onPressed: () {
@@ -64,7 +45,7 @@ class ItemStyleSettingPage extends StatelessWidget {
items[i],
if (index == i)
Positioned(
left: 15,
left: 25,
top: 15,
child: Circle(
color: Theme.of(context).primaryColor,
@@ -77,6 +58,6 @@ class ItemStyleSettingPage extends StatelessWidget {
),
)
],
))));
)));
}
}