常規(guī)自定義組件(案例一)
1.先上效果圖
ToggleSwitch.gif
2.關(guān)鍵代碼如下
1.代碼抽取
/// describe
///
/// created by hujintao
/// created at 2019-12-09
//
import 'package:flutter/material.dart';
typedef OnToggle = void Function(int index);
class ToggleSwitch extends StatefulWidget {
final Color activeBgColor;
final Color activeTextColor;
final Color inactiveBgColor;
final Color inactiveTextColor;
final List<String> labels;
final double cornerRadius;
final OnToggle onToggle;
final int initialLabelIndex;
final double minWidth;
final List<IconData> icons;
final List<Color> activeColors;
ToggleSwitch({
Key key,
@required this.activeBgColor,
@required this.activeTextColor,
@required this.inactiveBgColor,
@required this.inactiveTextColor,
@required this.labels,
this.onToggle,
this.cornerRadius = 8.0,
this.initialLabelIndex = 0,
this.minWidth = 72,
this.icons,
this.activeColors,
}) : super(key: key);
@override
_ToggleSwitchState createState() => _ToggleSwitchState();
}
class _ToggleSwitchState extends State<ToggleSwitch>
with AutomaticKeepAliveClientMixin<ToggleSwitch> {
int current;
@override
void initState() {
current = widget.initialLabelIndex;
super.initState();
}
@override
bool get wantKeepAlive => true;
@override
Widget build(BuildContext context) {
super.build(context);
return ClipRRect(
borderRadius: BorderRadius.circular(widget.cornerRadius),
child: Container(
height: 40,
color: widget.inactiveBgColor,
child: Row(
mainAxisSize: MainAxisSize.min,
children: List.generate(widget.labels.length * 2 - 1, (index) {
final active = index ~/ 2 == current;
final textColor =
active ? widget.activeTextColor : widget.inactiveTextColor;
var bgColor = Colors.transparent;
if (active) {
bgColor = widget.activeColors == null
? widget.activeBgColor
: widget.activeColors[index ~/ 2];
}
if (index % 2 == 1) {
final activeDivider = active || index ~/ 2 == current - 1;
return Container(
width: 1,
color: activeDivider ? widget.activeBgColor : Colors.white30,
margin: EdgeInsets.symmetric(vertical: activeDivider ? 0 : 8),
);
} else {
return GestureDetector(
onTap: () => _handleOnTap(index ~/ 2),
child: Container(
constraints: BoxConstraints(minWidth: widget.minWidth),
alignment: Alignment.center,
color: bgColor,
child: widget.icons == null
? Text(widget.labels[index ~/ 2],
style: TextStyle(color: textColor))
: Row(
children: <Widget>[
Icon(widget.icons[index ~/ 2],
color: textColor, size: 17.0),
Padding(
padding: const EdgeInsets.only(left: 5.0),
child: Text(widget.labels[index ~/ 2],
style: TextStyle(color: textColor)))
],
),
),
);
}
}),
),
),
);
}
void _handleOnTap(int index) async {
setState(() => current = index);
if (widget.onToggle != null) {
widget.onToggle(index);
}
}
}
2.代碼使用
ToggleSwitch(
initialLabelIndex: 1,
minWidth: ScreenUtil().setWidth(180),
cornerRadius: ScreenUtil().setWidth(70),
activeBgColor: Color(0xffED9CBE),
activeTextColor: Colors.white,
inactiveBgColor: Color(0xffF3F4F5),
inactiveTextColor: Color(0xff999999),
labels: ['匹配歷史', '匹配CP'],
onToggle: (index) {
print('switched to: $index');
}),
組件使用簡介~
-
minWidth設置最小寬度 -
cornerRadius設置圓角 -
activeBgColor設置高亮時的背景顏色 -
activeTextColor設置高亮時的字體顏色 -
inactiveBgColor設置常規(guī)背景顏色 -
inactiveTextColor設置常規(guī)字體顏色 -
labels設置標題數(shù)組 -
onToggle撥動回調(diào)方法
自定義Switch案例二(帶圓角滑塊)
1.先上效果圖
MatchingSwitch.gif
2.實現(xiàn)思路
- 最外層布局
Stack - 底部寫一個
Container背景組件(Widget) - 通過
AnimatedPositioned實現(xiàn)滑塊效果- 設置left或者right
- 滑動或者點擊實現(xiàn)過渡動畫
- 實現(xiàn)滑動底部列表或者點擊頂部Tab即可實現(xiàn)滑動滑動效果
3.關(guān)鍵代碼
import 'dart:async';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:fpdxapp/components/custom_appbar.dart';
import 'package:fpdxapp/components/switch/toggle.dart';
import 'package:fpdxapp/components/vip_tag.dart';
import 'package:fpdxapp/model/im/im.dart';
import 'package:fpdxapp/utils/screen.dart';
import 'package:fpdxapp/utils/toast.dart';
import 'package:fpdxapp/utils/utils.dart';
class MatchingPage extends StatefulWidget {
@override
_MatchingPageState createState() => _MatchingPageState();
}
class _MatchingPageState extends State<MatchingPage> {
int index = 1;
ListFriendConversationModel currentItem = ListFriendConversationModel();
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: CustomAppbar.appBar(
context,
title: '匹配CP|匹配歷史',
theme: CustomAppbarTheme.white,
),
body: MatchingWidget(),
);
}
}
class MatchingWidget extends StatefulWidget {
@override
_MatchingWidgetState createState() => _MatchingWidgetState();
}
class _MatchingWidgetState extends State<MatchingWidget> {
final _controller = new PageController();
final int pageSwitchAnimatedTime = 200;
double centerPoint = ScreenUtil().setWidth(318) / 2;
double value = ScreenUtil().setWidth(318) / 2;
final List<Widget> _pages = <Widget>[
MatchCp(),
MatchHistory(),
];
int currentIndex = 1;
@override
Widget build(BuildContext context) {
return Container(
child: SafeArea(
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
//主題Body
Container(
child: Column(
children: <Widget>[
// 切換Tab
Center(
child: Stack(
children: <Widget>[
// 主題
GestureDetector(
child: Container(
width: ScreenUtil().setWidth(318),
height: 40,
decoration: BoxDecoration(
color: Color(0xffF3F4F5),
borderRadius: BorderRadius.circular(
ScreenUtil().setWidth(70),
),
),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
Text(
'匹配歷史',
style: TextStyle(
color: Color(0xff999999),
fontSize: ScreenUtil().setSp(28),
),
),
Text(
'匹配CP',
style: TextStyle(
color: Color(0xff999999),
fontSize: ScreenUtil().setSp(28),
),
),
],
),
),
onTap: () {
print('this.value=========>${this.value}');
if (this.value == 0.0) {
this.value = ScreenUtil().setWidth(318) / 2;
currentIndex = 1;
} else {
currentIndex = 0;
this.value = 0.0;
}
//print("currentIndex=============${currentIndex}");
_controller.animateToPage(currentIndex == 0 ? 1 : 0,
duration: Duration(
milliseconds: (pageSwitchAnimatedTime + 100)),
curve: Curves.ease);
setState(() {});
},
),
// 滑塊
AnimatedPositioned(
left: this.value,
duration:
Duration(milliseconds: pageSwitchAnimatedTime),
child: Container(
width: ScreenUtil().setWidth(160),
height: 40,
decoration: BoxDecoration(
color: Color(0xffED9CBE),
borderRadius: BorderRadius.circular(
ScreenUtil().setWidth(70)),
),
child: Center(
child: Text(
currentIndex == 1 ? '匹配CP' : '匹配歷史',
style: TextStyle(
color: Colors.white,
fontSize: ScreenUtil().setSp(28),
),
),
),
),
),
],
),
),
// 匹配-Part
Container(
child: PageView.builder(
physics: new AlwaysScrollableScrollPhysics(),
controller: _controller,
itemBuilder: (BuildContext context, int index) {
return _pages[index];
},
//條目個數(shù)
itemCount: _pages.length,
onPageChanged: (int index) {
currentIndex = index == 0 ? 1 : 0;
this.value = currentIndex == 1
? ScreenUtil().setWidth(318) / 2
: 0.0;
setState(() {});
},
),
height: 500,
),
],
),
margin: EdgeInsets.only(top: ScreenUtil().setWidth(40)),
),
// 底部描述
Container(
margin: EdgeInsets.only(bottom: ScreenUtil().setWidth(37)),
child: Text(
'—— 到這兒剛剛好 ——',
style: TextStyle(
color: Color(0xff999999), fontSize: ScreenUtil().setSp(24)),
),
),
],
)),
decoration: BoxDecoration(
color: Colors.white,
boxShadow: [
BoxShadow(
offset: Offset(0, -ScreenUtil().setWidth(3)),
blurRadius: ScreenUtil().setWidth(6),
spreadRadius: ScreenUtil().setWidth(6),
color: Colors.black.withOpacity(0.03),
),
],
),
);
}
}
class MatchHistory extends StatelessWidget {
ListFriendConversationModel currentItem = ListFriendConversationModel();
@override
Widget build(BuildContext context) {
return Column(
children: <Widget>[
_matching(currentItem),
_matchSucceed(currentItem),
_matchFailed(currentItem),
],
);
}
/// 匹配中
Widget _matching(ListFriendConversationModel currentItem) {
return Column(
children: <Widget>[
// 主題部分
Container(
color: Colors.transparent,
width: Screen.width,
margin: EdgeInsets.only(
left: ScreenUtil().setWidth(20),
right: ScreenUtil().setWidth(16),
top: ScreenUtil().setHeight(20),
bottom: ScreenUtil().setHeight(20)),
//color: Colors.green,
child: Container(
child: Row(
children: <Widget>[
Expanded(
child: Row(
children: <Widget>[
// 左邊icon 部分
Container(
width: ScreenUtil().setWidth(120),
height: ScreenUtil().setWidth(120),
decoration: BoxDecoration(
color: Color(0xffFFF2F4),
border:
new Border.all(width: 2.0, color: Colors.white),
borderRadius: BorderRadius.all(
Radius.circular(ScreenUtil().setWidth(120))),
boxShadow: [
BoxShadow(
offset: Offset(0, 0),
blurRadius: ScreenUtil().setWidth(7),
color: Color(0xffC4566F).withOpacity(0.13),
),
],
),
child: Container(
margin: EdgeInsets.all(2),
decoration: BoxDecoration(
borderRadius: BorderRadius.all(
Radius.circular(ScreenUtil().setWidth(151))),
),
child: Center(
child: Image(
image:
Utils.getAssetImgWithPath('matching_in_cp'),
width: ScreenUtil().setWidth(70),
),
),
),
),
// 文字部分
Expanded(
child: Container(
margin:
EdgeInsets.only(left: ScreenUtil().setWidth(15)),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Row(
children: <Widget>[
Text(
'匹配中',
style: TextStyle(
fontSize: ScreenUtil().setSp(30),
color: Color(0xffFF7E98)),
overflow: TextOverflow.ellipsis,
maxLines: 1,
),
Padding(
padding: const EdgeInsets.only(left: 5),
child: VipTag(
currentItem.user?.beVipAt ?? 0,
currentItem.user?.supvipEndAt ?? 0,
currentItem.user?.wxAuth),
)
],
),
SizedBox(
height: ScreenUtil().setHeight(4),
),
Text(
'請于8月08日查詢匹配結(jié)果',
style: TextStyle(
fontSize: ScreenUtil().setSp(24),
color: Color(0xFFAAAAAA)),
overflow: TextOverflow.ellipsis,
maxLines: 1,
),
],
),
),
),
],
),
),
// 箭頭角標
Container(
child: Icon(
Icons.arrow_forward_ios,
size: ScreenUtil().setSp(28),
color: Color(0xff999999),
),
margin: EdgeInsets.only(right: ScreenUtil().setWidth(20)),
),
],
),
),
),
// 分割線
Container(
child: Divider(
height: ScreenUtil().setHeight(2),
indent: ScreenUtil().setWidth(150),
endIndent: ScreenUtil().setWidth(30),
color: Color(0xffEEEEEE),
),
margin: EdgeInsets.only(bottom: 1),
),
],
);
}
/// 匹配成功
Widget _matchSucceed(ListFriendConversationModel currentItem) {
return Column(
children: <Widget>[
// 主題部分
Container(
color: Colors.transparent,
width: Screen.width,
margin: EdgeInsets.only(
left: ScreenUtil().setWidth(20),
right: ScreenUtil().setWidth(16),
top: ScreenUtil().setHeight(20),
bottom: ScreenUtil().setHeight(20)),
//color: Colors.green,
child: Container(
child: Row(
children: <Widget>[
Expanded(
child: Row(
children: <Widget>[
// 左邊icon 部分
Container(
width: ScreenUtil().setWidth(120),
height: ScreenUtil().setWidth(120),
decoration: BoxDecoration(
color: Color(0xffFFE7EC),
border: new Border.all(
width: 2.0, color: Color(0xffFA8396)),
borderRadius: BorderRadius.all(
Radius.circular(ScreenUtil().setWidth(120))),
),
child: Container(
margin: EdgeInsets.all(2),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.all(
Radius.circular(ScreenUtil().setWidth(151))),
image: DecorationImage(
image: NetworkImage(
'https://dss1.bdstatic.com/6OF1bjeh1BF3odCf/it/u=4023145134,3753224785&fm=74&app=80&f=JPEG&size=f121,90?sec=1880279984&t=49fe2a9b312d6f606c1dab71efc9b252'),
fit: BoxFit.cover),
),
),
),
// 文字部分
Expanded(
child: Container(
margin:
EdgeInsets.only(left: ScreenUtil().setWidth(15)),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Row(
children: <Widget>[
Text(
'小殼兒',
style: TextStyle(
fontSize: ScreenUtil().setSp(30),
color: Color(0xff333333)),
overflow: TextOverflow.ellipsis,
maxLines: 1,
),
Padding(
padding: const EdgeInsets.only(left: 5),
child: VipTag(
currentItem.user?.beVipAt ?? 0,
currentItem.user?.supvipEndAt ?? 0,
currentItem.user?.wxAuth),
)
],
),
SizedBox(
height: ScreenUtil().setHeight(4),
),
Text(
'51期匹配CP',
style: TextStyle(
fontSize: ScreenUtil().setSp(24),
color: Color(0xFFAAAAAA)),
overflow: TextOverflow.ellipsis,
maxLines: 1,
),
],
),
),
),
],
),
),
// 箭頭角標
Container(
child: Icon(
Icons.arrow_forward_ios,
size: ScreenUtil().setSp(28),
color: Color(0xff999999),
),
margin: EdgeInsets.only(right: ScreenUtil().setWidth(20)),
),
],
),
),
),
// 分割線
Container(
child: Divider(
height: ScreenUtil().setHeight(2),
indent: ScreenUtil().setWidth(150),
endIndent: ScreenUtil().setWidth(30),
color: Color(0xffEEEEEE),
),
margin: EdgeInsets.only(bottom: 1),
),
],
);
}
/// 匹配失敗
Widget _matchFailed(ListFriendConversationModel currentItem) {
return Column(
children: <Widget>[
// 主題部分
Container(
color: Colors.transparent,
width: Screen.width,
margin: EdgeInsets.only(
left: ScreenUtil().setWidth(20),
right: ScreenUtil().setWidth(16),
top: ScreenUtil().setHeight(20),
bottom: ScreenUtil().setHeight(20)),
//color: Colors.green,
child: Container(
child: Row(
children: <Widget>[
Expanded(
child: Row(
children: <Widget>[
// 左邊icon 部分
Container(
width: ScreenUtil().setWidth(120),
height: ScreenUtil().setWidth(120),
decoration: BoxDecoration(
color: Color(0xffF3F4F5),
border:
new Border.all(width: 2.0, color: Colors.white),
borderRadius: BorderRadius.all(
Radius.circular(ScreenUtil().setWidth(120))),
boxShadow: [
BoxShadow(
offset: Offset(0, 0),
blurRadius: ScreenUtil().setWidth(7),
color: Color(0xffC4566F).withOpacity(0.13),
),
],
),
child: Container(
margin: EdgeInsets.all(2),
decoration: BoxDecoration(
borderRadius: BorderRadius.all(
Radius.circular(ScreenUtil().setWidth(151))),
),
child: Center(
child: Image(
image:
Utils.getAssetImgWithPath('matching_fail_cp'),
width: ScreenUtil().setWidth(60),
),
),
),
),
// 文字部分
Expanded(
child: Container(
margin:
EdgeInsets.only(left: ScreenUtil().setWidth(15)),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Row(
children: <Widget>[
Text(
'匹配失敗',
style: TextStyle(
fontSize: ScreenUtil().setSp(30),
color: Color(0xff999999)),
overflow: TextOverflow.ellipsis,
maxLines: 1,
),
Padding(
padding: const EdgeInsets.only(left: 5),
child: VipTag(
currentItem.user?.beVipAt ?? 0,
currentItem.user?.supvipEndAt ?? 0,
currentItem.user?.wxAuth),
)
],
),
SizedBox(
height: ScreenUtil().setHeight(4),
),
Text(
'已報名下一期分配對象',
style: TextStyle(
fontSize: ScreenUtil().setSp(24),
color: Color(0xFFDEDEDE)),
overflow: TextOverflow.ellipsis,
maxLines: 1,
),
],
),
),
),
],
),
),
],
),
),
),
// 分割線
Container(
child: Divider(
height: ScreenUtil().setHeight(2),
indent: ScreenUtil().setWidth(150),
endIndent: ScreenUtil().setWidth(30),
color: Color(0xffEEEEEE),
),
margin: EdgeInsets.only(bottom: 1),
),
],
);
}
}
class MatchCp extends StatelessWidget {
ListFriendConversationModel currentItem = ListFriendConversationModel();
@override
Widget build(BuildContext context) {
return Column(
children: <Widget>[
_matchSucceed(currentItem),
_matchSucceed(currentItem),
],
);
}
/// 匹配中
Widget _matching(ListFriendConversationModel currentItem) {
return Column(
children: <Widget>[
// 主題部分
Container(
color: Colors.transparent,
width: Screen.width,
margin: EdgeInsets.only(
left: ScreenUtil().setWidth(20),
right: ScreenUtil().setWidth(16),
top: ScreenUtil().setHeight(20),
bottom: ScreenUtil().setHeight(20)),
//color: Colors.green,
child: Container(
child: Row(
children: <Widget>[
Expanded(
child: Row(
children: <Widget>[
// 左邊icon 部分
Container(
width: ScreenUtil().setWidth(120),
height: ScreenUtil().setWidth(120),
decoration: BoxDecoration(
color: Color(0xffFFF2F4),
border:
new Border.all(width: 2.0, color: Colors.white),
borderRadius: BorderRadius.all(
Radius.circular(ScreenUtil().setWidth(120))),
boxShadow: [
BoxShadow(
offset: Offset(0, 0),
blurRadius: ScreenUtil().setWidth(7),
color: Color(0xffC4566F).withOpacity(0.13),
),
],
),
child: Container(
margin: EdgeInsets.all(2),
decoration: BoxDecoration(
borderRadius: BorderRadius.all(
Radius.circular(ScreenUtil().setWidth(151))),
),
child: Center(
child: Image(
image:
Utils.getAssetImgWithPath('matching_in_cp'),
width: ScreenUtil().setWidth(70),
),
),
),
),
// 文字部分
Expanded(
child: Container(
margin:
EdgeInsets.only(left: ScreenUtil().setWidth(15)),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Row(
children: <Widget>[
Text(
'匹配中',
style: TextStyle(
fontSize: ScreenUtil().setSp(30),
color: Color(0xffFF7E98)),
overflow: TextOverflow.ellipsis,
maxLines: 1,
),
Padding(
padding: const EdgeInsets.only(left: 5),
child: VipTag(
currentItem.user?.beVipAt ?? 0,
currentItem.user?.supvipEndAt ?? 0,
currentItem.user?.wxAuth),
)
],
),
SizedBox(
height: ScreenUtil().setHeight(4),
),
Text(
'請于8月08日查詢匹配結(jié)果',
style: TextStyle(
fontSize: ScreenUtil().setSp(24),
color: Color(0xFFAAAAAA)),
overflow: TextOverflow.ellipsis,
maxLines: 1,
),
],
),
),
),
],
),
),
// 箭頭角標
Container(
child: Icon(
Icons.arrow_forward_ios,
size: ScreenUtil().setSp(28),
color: Color(0xff999999),
),
margin: EdgeInsets.only(right: ScreenUtil().setWidth(20)),
),
],
),
),
),
// 分割線
Container(
child: Divider(
height: ScreenUtil().setHeight(2),
indent: ScreenUtil().setWidth(150),
endIndent: ScreenUtil().setWidth(30),
color: Color(0xffEEEEEE),
),
margin: EdgeInsets.only(bottom: 1),
),
],
);
}
/// 匹配成功
Widget _matchSucceed(ListFriendConversationModel currentItem) {
return Column(
children: <Widget>[
// 主題部分
Container(
color: Colors.transparent,
width: Screen.width,
margin: EdgeInsets.only(
left: ScreenUtil().setWidth(20),
right: ScreenUtil().setWidth(16),
top: ScreenUtil().setHeight(20),
bottom: ScreenUtil().setHeight(20)),
//color: Colors.green,
child: Container(
child: Row(
children: <Widget>[
Expanded(
child: Row(
children: <Widget>[
// 左邊icon 部分
Container(
width: ScreenUtil().setWidth(120),
height: ScreenUtil().setWidth(120),
decoration: BoxDecoration(
color: Color(0xffFFE7EC),
border: new Border.all(
width: 2.0, color: Color(0xffFA8396)),
borderRadius: BorderRadius.all(
Radius.circular(ScreenUtil().setWidth(120))),
),
child: Container(
margin: EdgeInsets.all(2),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.all(
Radius.circular(ScreenUtil().setWidth(151))),
image: DecorationImage(
image: NetworkImage(
'https://dss1.bdstatic.com/6OF1bjeh1BF3odCf/it/u=4023145134,3753224785&fm=74&app=80&f=JPEG&size=f121,90?sec=1880279984&t=49fe2a9b312d6f606c1dab71efc9b252'),
fit: BoxFit.cover),
),
),
),
// 文字部分
Expanded(
child: Container(
margin:
EdgeInsets.only(left: ScreenUtil().setWidth(15)),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Row(
children: <Widget>[
Text(
'小殼兒',
style: TextStyle(
fontSize: ScreenUtil().setSp(30),
color: Color(0xff333333)),
overflow: TextOverflow.ellipsis,
maxLines: 1,
),
Padding(
padding: const EdgeInsets.only(left: 5),
child: VipTag(
currentItem.user?.beVipAt ?? 0,
currentItem.user?.supvipEndAt ?? 0,
currentItem.user?.wxAuth),
)
],
),
SizedBox(
height: ScreenUtil().setHeight(4),
),
Text(
'51期匹配CP',
style: TextStyle(
fontSize: ScreenUtil().setSp(24),
color: Color(0xFFAAAAAA)),
overflow: TextOverflow.ellipsis,
maxLines: 1,
),
],
),
),
),
],
),
),
// 箭頭角標
Container(
child: Icon(
Icons.arrow_forward_ios,
size: ScreenUtil().setSp(28),
color: Color(0xff999999),
),
margin: EdgeInsets.only(right: ScreenUtil().setWidth(20)),
),
],
),
),
),
// 分割線
Container(
child: Divider(
height: ScreenUtil().setHeight(2),
indent: ScreenUtil().setWidth(150),
endIndent: ScreenUtil().setWidth(30),
color: Color(0xffEEEEEE),
),
margin: EdgeInsets.only(bottom: 1),
),
],
);
}
/// 匹配失敗
Widget _matchFailed(ListFriendConversationModel currentItem) {
return Column(
children: <Widget>[
// 主題部分
Container(
color: Colors.transparent,
width: Screen.width,
margin: EdgeInsets.only(
left: ScreenUtil().setWidth(20),
right: ScreenUtil().setWidth(16),
top: ScreenUtil().setHeight(20),
bottom: ScreenUtil().setHeight(20)),
//color: Colors.green,
child: Container(
child: Row(
children: <Widget>[
Expanded(
child: Row(
children: <Widget>[
// 左邊icon 部分
Container(
width: ScreenUtil().setWidth(120),
height: ScreenUtil().setWidth(120),
decoration: BoxDecoration(
color: Color(0xffF3F4F5),
border:
new Border.all(width: 2.0, color: Colors.white),
borderRadius: BorderRadius.all(
Radius.circular(ScreenUtil().setWidth(120))),
boxShadow: [
BoxShadow(
offset: Offset(0, 0),
blurRadius: ScreenUtil().setWidth(7),
color: Color(0xffC4566F).withOpacity(0.13),
),
],
),
child: Container(
margin: EdgeInsets.all(2),
decoration: BoxDecoration(
borderRadius: BorderRadius.all(
Radius.circular(ScreenUtil().setWidth(151))),
),
child: Center(
child: Image(
image:
Utils.getAssetImgWithPath('matching_fail_cp'),
width: ScreenUtil().setWidth(60),
),
),
),
),
// 文字部分
Expanded(
child: Container(
margin:
EdgeInsets.only(left: ScreenUtil().setWidth(15)),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Row(
children: <Widget>[
Text(
'匹配失敗',
style: TextStyle(
fontSize: ScreenUtil().setSp(30),
color: Color(0xff999999)),
overflow: TextOverflow.ellipsis,
maxLines: 1,
),
Padding(
padding: const EdgeInsets.only(left: 5),
child: VipTag(
currentItem.user?.beVipAt ?? 0,
currentItem.user?.supvipEndAt ?? 0,
currentItem.user?.wxAuth),
)
],
),
SizedBox(
height: ScreenUtil().setHeight(4),
),
Text(
'已報名下一期分配對象',
style: TextStyle(
fontSize: ScreenUtil().setSp(24),
color: Color(0xFFDEDEDE)),
overflow: TextOverflow.ellipsis,
maxLines: 1,
),
],
),
),
),
],
),
),
],
),
),
),
// 分割線
Container(
child: Divider(
height: ScreenUtil().setHeight(2),
indent: ScreenUtil().setWidth(150),
endIndent: ScreenUtil().setWidth(30),
color: Color(0xffEEEEEE),
),
margin: EdgeInsets.only(bottom: 1),
),
],
);
}
}
未完-待續(xù).
