Flutter自定义Widget之IconTextButton图文按钮

IconTextButton

IconTextButton 是一个图文按钮，Flutter的RaisedButton按钮RaisedButton.icon()按钮只能实现左图右文字

IconTextButton.icon() 可以实现四种样式：
图在上文字在下，图在下文字在上，图在左文字在右，图在右文字在左

使用也很简单,其它属性设置和RaisedButton.icon()一样，
只需要设置属性iconTextAlignment，它是一个枚举值 :

 enum IconTextAlignment {
  iconTopTextBottom,//图在上文字在下
  iconBottomTextTop,//图在下文字在上
  iconLeftTextRight,//图在左文字在右
  iconRightTextLeft,//图在右文字在左
}

eg1:

 IconTextButton.icon(
  icon: Icon(Icons.add_alarm,size: 80,),
  label: Text("图下文上"),
  color: Colors.lightBlue,
  textColor: Colors.white,
  elevation: 4.0,
  iconTextAlignment: IconTextAlignment.iconBottomTextTop,
  onPressed: (){
    onClick("图下文上");
  },
),

eg2:

 Column(children: <Widget>[

            Container(height: 30,),

            IconTextButton.icon(
            icon: Icon(Icons.add_alarm,size: 80,),
            label: Text("图左文右"),
            color: Colors.lightBlue,
            textColor: Colors.white,
            elevation: 4.0,
            iconTextAlignment: IconTextAlignment.iconLeftTextRight,
            onPressed: (){
              onClick("图左文右");
            },
          ),

          Container(height: 30,),

          IconTextButton.icon(
            icon: Icon(Icons.add_alarm,size: 80,),
            label: Text("图右文左"),
            color: Colors.lightBlue,
            textColor: Colors.white,
            elevation: 4.0,
            iconTextAlignment: IconTextAlignment.iconRightTextLeft,
            onPressed: (){
              onClick("图右文左");
            },
          ),

          Container(height: 30,),

          IconTextButton.icon(
            icon: Icon(Icons.add_alarm,size: 80,),
            label: Text("图上文下"),
            color: Colors.lightBlue,
            textColor: Colors.white,
            elevation: 4.0,
            iconTextAlignment: IconTextAlignment.iconTopTextBottom,
            onPressed: (){
              onClick("图上文下");
            },
          ),

          Container(height: 30,),

          IconTextButton.icon(
            icon: Icon(Icons.add_alarm,size: 80,),
            label: Text("图下文上"),
            color: Colors.lightBlue,
            textColor: Colors.white,
            elevation: 4.0,
            iconTextAlignment: IconTextAlignment.iconBottomTextTop,
            onPressed: (){
              onClick("图下文上");
            },
          ),
          ],)

IconTextButton.gif

使用方法：

直接把IconTextButton.dart文件拖入项目中，然后在使用的文件中导入
import 'package:自己存放的路径/IconTextButton.dart';即可使用;
如果不满足需求，完全可以在代码上面直接进行需改,
比如：图片和文字的间隔或者文字和图片到边的距离

源码文件下载地址：

获取源码->Flutter

2022-07-28 更新新版-图文按钮

获取源码->ImageButton

2019-09-27 更新 IconTextButton升级为 IfeiyvIconTextButton V1.0.1

更新内容：

  1. IconTextAlignment 添加 noIconOnlyText,//无图仅包含文字
      此时创建的 IfeiyvIconTextButton 的Icon属性 【必填】可以为 null 也可以是 不为null的Icon

  2. 添加 backgroundView 为 IfeiyvIconTextButton  添加一个背景视图Widget，常用来做背景图片..

    如果要使用圆角则可以使用  IfeiyvIconTextButton.icon 中的 shape属性 
      shape: const RoundedRectangleBorder(borderRadius: BorderRadius.all(Radius.circular(40.0))),

    如果backgroundView是背景图片可以ClipRRect进行切圆角
    ClipRRect(
      borderRadius: BorderRadius.all(Radius.circular(40.0)),
      child: Image.asset("images/bg.png",fit: BoxFit.fill,height: 80,),
    ),

    注意：如果 IfeiyvIconTextButton设置了高度
      如: 
      SizedBox(
           height: 80,
           child:IfeiyvIconTextButton.icon()
      )
      如果想要背景view或者背景图片填充满，最好高度也设置一下，和height高度一致

  3. 为了布局更加灵活，添加可选参数
        double paddingIconText,// 图标和文字之间的间隔
        double paddingLabelToBorder,// 文字到按钮边界的间隔

  eg:

    IfeiyvIconTextButton.icon(
        padding: EdgeInsets.all(0),
        shape:const RoundedRectangleBorder(borderRadius: BorderRadius.all(Radius.circular(40.0))),
        backgroundView: ClipRRect(
            borderRadius: BorderRadius.all(Radius.circular(40.0)),
            child: Image.asset("images/bg.png",fit: BoxFit.fill,height: 80,),
        ),
        onPressed: (){},
        iconTextAlignment: IconTextAlignment.noIconOnlyText,
        icon:null,
        label: Text("登录",style: TextStyle(
            fontSize: 20,
            color: Colors.white
          ),),
        ),

test005.gif

最后编辑于：2022.07.28 13:25:39