1、控件功能描述:
自定义控件之组合控件法实现ItemNextButton控件(显示文本、箭头指示图标及点击事件)
2、控件实现代码:
import 'package:flutter/material.dart';
/*
* 带指示图标可点击进入详情页的Item
*/
class ItemNextButton extends StatefulWidget {
//点击回调
final GestureTapCallback onTap;
final String text;
ItemNextButton({this.onTap, this.text});
@override
State createState() {
return _ItemNextButtonState(this.onTap, this.text);
}
}
class _ItemNextButtonState extends State<ItemNextButton> {
//点击回调
final GestureTapCallback onTap;
final String text;
_ItemNextButtonState(this.onTap, this.text);
@override
Widget build(BuildContext context) {
Widget _SectionUpdate = Container(
color: Colors.white70,
padding: EdgeInsets.only(left: 20),
child: InkWell(
child: Row(
children: <Widget>[
Expanded(
child: Text(text ?? ""),
),
IconButton(
onPressed: onTap,
icon: Icon(
Icons.navigate_next,
color: Colors.grey[400],
)),
],
),
),
);
return GestureDetector(
onTap: onTap,
child: Column(
children: <Widget>[
_SectionUpdate,
],
),
);
}
}
3、自定义控件使用方式:
Widget _SectionAbout = ItemNextButton(
text: "关于",
onTap: () {},
);
4、完整页面使用方式:
import 'package:flutter/material.dart';
import 'package:flutterdemo/page/util/CommonUtil.dart';
import 'package:flutterdemo/page/util/LocalStorage.dart';
import 'package:flutterdemo/page/util/NavigatorUtils.dart';
import 'package:flutterdemo/widget/ItemNextButton.dart';
class SettingPage extends StatefulWidget {
State<StatefulWidget> createState() => _SettingPageState();
}
class _SettingPageState extends State<SettingPage> {
@override
Widget build(BuildContext context) {
Widget _SectionPwdUpdate = ItemNextButton(
text: "修改密码",
onTap: () {
NavigatorUtils.goUpdatePassword(context);
},
);
Widget _SectionAbout = ItemNextButton(
text: "关于",
onTap: () {},
);
Widget _SectionFeedback = ItemNextButton(
text: "意见反馈",
onTap: () {},
);
Widget _SectionMarking = ItemNextButton(
text: "评分鼓励",
onTap: () {},
);
Widget _SectionCustomer = ItemNextButton(
text: "联系客服",
onTap: () {},
);
Widget _SectionDivider = Container(
height: 10,
color: Colors.grey[100],
);
Widget _SectionLine = Container(
height: 0.5,
color: Colors.grey[200],
);
Widget _SectionLoginOut = new Container(
margin: EdgeInsets.fromLTRB(0, 30.0, 0, 0),
child: new Container(
width: 200,
child: RaisedButton(
color: Colors.blue,
highlightColor: Colors.blue[700],
colorBrightness: Brightness.dark,
splashColor: Colors.grey,
shape:
RoundedRectangleBorder(borderRadius: BorderRadius.circular(20.0)),
child: Text("退出"),
textColor: Colors.white,
onPressed: () {
LocalStorage.clearLoginInfo();
NavigatorUtils.goLoginDis(context);
},
),
),
);
return new MaterialApp(
home: new Scaffold(
appBar: new AppBar(
title: new Text('设置'),
centerTitle: true,
leading: IconButton(
icon: Icon(Icons.arrow_back, color: Colors.white),
onPressed: () => Navigator.pop(context)),
actions: <Widget>[new Container()],
),
body: Container(
color: Colors.grey[100],
child: Column(
children: <Widget>[
_SectionPwdUpdate,
_SectionDivider,
_SectionAbout,
_SectionLine,
_SectionFeedback,
_SectionLine,
_SectionMarking,
_SectionLine,
_SectionCustomer,
_SectionLoginOut,
],
),
),
),
);
}
}
5、页面显示效果: