flutter

Flutter按钮组件:带字体图标的按钮(FlatButton.icon)

银戒 · 5月7日 · 2019年 · · 537次已读

FlatButton.icon

FlatButton.icon:既可以带文字描述,也可以带字体图标,如图:

常用属性:

  • icon:图标
  • label:标签,可以new一个文本控件
  • textColor:按钮字体颜色
  • padding:边距
  • color:按钮颜色
  • onPressed:点击事件

实例如下:

 return new Scaffold(
      body: new Container(
        child: ListView(
          padding: EdgeInsets.fromLTRB(100.0, 200.0, 100.0, 0),
          children: <Widget>[
            new FlatButton.icon(
              icon: new Icon(Icons.rowing),
              label: Text("Start now",style: new TextStyle(fontSize: 17)),
              textColor: Colors.white,
              padding: EdgeInsets.fromLTRB(0.0, 10.0, 0, 10.0),
              color: Colors.blue,
              onPressed: (){
                return 1;
              },
            ),
            new FlatButton.icon(
                onPressed:  (){
                  return 1;
                },
                textColor: Colors.white,
                icon: new Icon(Icons.fiber_smart_record),
                padding: EdgeInsets.fromLTRB(0.0, 10.0, 0, 10.0),
                label: new Text("About us",style: new TextStyle(fontSize: 17)),
                color: Colors.indigo
            )
          ],
        ),
      )
    );

官方文档: https://docs.flutter.io/flutter/material/FlatButton/FlatButton.icon.html

广告时间

高质量技术QQ交流群,在这里,你的所有问题都会有答案:824144151(因为群里的人提倡和呼吁高调做人,低调行事,所以群名叫做中级质量技术交流群)

0 条回应