flutter common init 常用Widget初始化
Card初始化
Card(
clipBehavior: Clip.antiAlias,
color: ColorConst.Color_Font_White,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(8),
),
child:Container(),
),
圆角解决方案
ClipRRect
decration
Card
自定义Appbar
import 'package:flutter/material.dart';
class KZAppBar {
/// 标题widget
final Widget title;
/// 是否有返回功能
final bool canBack;
final List<Widget> actions;
KZAppBar({
this.title,
this.canBack: true,
this.actions,
});
PreferredSizeWidget build(context) {
return AppBar(
title: this.title,
leading: this.canBack ? GestureDetector(
onTap: () {
Navigator.pop(context);
},
child: Icon(Icons.arrow_back_ios),
):null,
automaticallyImplyLeading: this.canBack,
actions: this.actions,
centerTitle: true,
elevation: 0.5,
);
}
}
//使用
KZAppBar(
title: Text('我的收藏'),
).build(context),
TextField 自定义searchBar
//默认TextField
TextField(
controller: _controller,
textAlign: TextAlign.center,
keyboardType: TextInputType.number,
cursorColor: ColorConst.Color_Font_Orange,
decoration: InputDecoration(
border: InputBorder.none, //隐藏下划线
contentPadding: EdgeInsets.only(
top: -SIZE_SCALE(5), bottom: SIZE_SCALE(15)),
),
onSubmitted: (res) {
//点击了提交
print('点击了完成');
},
style: TextStyle(
color: ColorConst.Color_Font_Black,
fontSize: FONT_SCALE(16),
),
)
//iOS风格TextField
CupertinoTextField(
controller: _controller,
decoration: BoxDecoration(
border: null,
),
enabled: widget.enableEditing,
placeholder: widget.placeholder,
textInputAction: TextInputAction.search,
style: TextStyle(
color: ColorConst.Color_Font_Black,
fontSize: FONT_SCALE(14),
),
onSubmitted: (text) {
FocusScope.of(context).unfocus();
if (widget.enableEditing &&
widget.onSearch != null &&
_controller.text.trim().length > 0) {
//开启搜索
widget.onSearch(_controller.text.trim());
}
},
// onEditingComplete: () {
// print('结束编辑');
// },
)
//自定义searchBar
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_repairstation/utils/const.dart';
import 'package:flutter_repairstation/utils/scale.dart';
typedef SearchBarClick = Function();
typedef SearchContentBlock = Function(String text);
typedef SearchBarCloseBlock = Function();
class SearchBar extends StatefulWidget {
/// 默认文字placeholder
final String placeholder;
/// 默认文字
final String text;
/// 是否可点击搜索
final bool enableEditing;
/// 搜索框被点击了回调
final SearchBarClick barClickBlock;
/// 搜索框被点击了回调
final SearchContentBlock onSearch;
/// 点击清空
final SearchBarCloseBlock onClose;
SearchBar({
this.text,
this.placeholder: '搜索',
this.enableEditing: true,
this.barClickBlock,
this.onSearch,
this.onClose,
});
//主动创建state对象并赋值 后面可以使用这个对象赋值内部变量
_SearchBarState myAppState = _SearchBarState();
@override
_SearchBarState createState() => myAppState;
/// 外部赋值
void setText(String text){
//赋值
myAppState._controller.text = text;
}
}
class _SearchBarState extends State<SearchBar> {
TextEditingController _controller = TextEditingController();
bool _showClose = false;
@override
void dispose() {
_controller.dispose();
super.dispose();
}
@override
void initState() {
super.initState();
_controller.text = widget.text;
_controller.addListener(() {
String text = _controller.text;
setState(() {
_showClose = (text.length > 0);
});
});
_showClose = (_controller.text.length > 0);
}
@override
Widget build(BuildContext context) {
return Material(
color: ColorConst.Color_Clear,
child: GestureDetector(
onTap: () {
/// 点击回调
if (!widget.enableEditing && widget.barClickBlock != null) {
widget.barClickBlock();
}
},
child: Container(
height: SIZE_SCALE(36),
child: Row(
children: <Widget>[
SizedBox(width: 15),
Container(
child: Image.asset(
'assets/icon_search.png',
height: 17,
width: 17,
fit: BoxFit.cover,
),
),
SizedBox(width:3),
Expanded(
child: CupertinoTextField(
controller: _controller,
decoration: BoxDecoration(
border: null,
),
enabled: widget.enableEditing,
placeholder: widget.placeholder,
textInputAction: TextInputAction.search,
style: TextStyle(
color: ColorConst.Color_Font_Black,
fontSize: FONT_SCALE(14),
),
onSubmitted: (text) {
FocusScope.of(context).unfocus();
if (widget.enableEditing &&
widget.onSearch != null &&
_controller.text.trim().length > 0) {
//开启搜索
widget.onSearch(_controller.text.trim());
}
},
// onEditingComplete: () {
// print('结束编辑');
// },
),
),
SizedBox(width: 10),
_showClose
? GestureDetector(
onTap: () {
//清空输入框内容 同时把事件传递出去
_controller.text = '';
if(widget.onClose != null){
widget.onClose();
}
},
child: Image.asset(
'assets/icon_close_fill.png',
width: SIZE_SCALE(15),
height: SIZE_SCALE(15),
fit: BoxFit.cover,
),
)
: Container(),
SizedBox(width: 10),
],
),
decoration: BoxDecoration(
color: Color(0xFFF6F6F6),
borderRadius: BorderRadius.circular(SIZE_SCALE(18)),
),
),
),
);
}
}
tagView支持自动换行
import 'package:flutter/material.dart';
import 'package:flutter_repairstation/utils/const.dart';
import 'package:flutter_repairstation/utils/scale.dart';
typedef LableClickBlock = Function(String text);
class DiscountView extends StatefulWidget {
/// 内容列表
final List<dynamic> list;
/// 内容文字上下左右间距
EdgeInsets labelPadding;
/// 文字样式
TextStyle lableStyle;
/// 背景颜色
Color labelBackgroundColor;
/// 圆角度数
final double radius;
/// lable横向间距
final double spacing;
/// lable纵向间距
final double runSpacing;
final LableClickBlock onTap;
DiscountView({
Key key,
this.list,
EdgeInsets labelPadding,
TextStyle lableStyle,
Color labelBackgroundColor,
this.radius: 2,
this.runSpacing: 10,
this.spacing: 10,
this.onTap,
}) : super(key: key) {
/// 初始化默认值
this.labelPadding = labelPadding ?? EdgeInsets.fromLTRB(5, 2, 5, 2);
this.lableStyle = lableStyle ??
TextStyle(color: Color(0xFFF0441C), fontSize: FONT_SCALE(12));
this.labelBackgroundColor =
labelBackgroundColor ?? Color.fromRGBO(254, 237, 233, 1);
}
@override
_DiscountViewState createState() => _DiscountViewState();
}
class _DiscountViewState extends State<DiscountView> {
@override
Widget build(BuildContext context) {
return Material(
child: Container(
color: ColorConst.Color_Font_White,
alignment: Alignment.centerLeft,
child: Wrap(
spacing: widget.spacing,
runSpacing: widget.runSpacing,
children: widget.list.map((res) {
int i = widget.list.indexOf(res);
return GestureDetector(
onTap: (){
if(widget.onTap != null){
widget.onTap(res);
}
},
child: Container(
child: Text(
widget.list[i],
style: widget.lableStyle,
),
padding: widget.labelPadding,
decoration: BoxDecoration(
color: widget.labelBackgroundColor,
borderRadius: BorderRadius.circular(widget.radius),
),
),
);
}).toList(),
),
),
);
}
}
//使用
DiscountView(list:['满800送行李箱', '润滑油', '电瓶', '润滑油', '电瓶'])
