Flutter学习之自定义控件之组合控件法实现ItemNextButton控件（显示文本、箭头指示图标及点击事件）

版权声明：本文为博主Pillar原创文章，欢迎转载并使用博客阅读器阅读 http://fir.im/CSDNBlog https://blog.csdn.net/Pillar1066527881/article/details/89088256

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、页面显示效果：