flutter 按钮组件

1、普通按钮RaisedButton
	无法自己设置高宽,可以通过父元素或通过给child组件内部组件外包一个Padding组件来设置高宽
	
	RaisedButton(
		child:
		onPressed  点击事件,设置后点击按钮会产生水纹动画
		textTheme:ButtonTextTheme.normal/ButtonTextTheme.accent/ButtonTextTheme.primary   字体主题颜色
		textColor  字体颜色
		disabledTextColor,   按钮禁用时候文字的颜色
		color,  按钮的背景颜色
		highlightColor,  点击或者toch控件高亮的时候显示在控件上面,水波纹下面的颜色
		splashColor,  水波纹的颜色
		colorBrightness,  按钮主题高亮
		elevation,  按钮下面的阴影
		highlightElevation,  高亮时候的阴影
		disabledElevation,  按下的时候的阴影
		focusColor,
		hoverColor,
		shape:  设置形状
		
			(1) 圆角形状
			RoundedRectangleBorder(
	            borderRadius: BorderRadius.circular(20),
	            side:BorderSide(color: ,width:,style: BorderStyle.solid/none) 边框样式
	          )
	        (2)圆形
	        CircleBorder(
		             side: BorderSide(color:Colors.blue,width: 1,style:BorderStyle.solid) 边框
		      ),
		...
	)

文字带图标按钮
    RaisedButton.icon(
      onPressed: (){}, 
      icon: Icon(Icons.home), 
      label: Text('带图标'),
     ),

扁平按钮,可以.icon带图标
     FlatButton( 
      child: Text('按钮'),
      onPressed: (){},
      color: Colors.blue,
    ),

边框按钮背景无色,可以.icon带图标
    OutlineButton( //边框按钮背景无色,可以.icon带图标
        child: Text('扁平'),
        onPressed: (){},
        borderSide:BorderSide(color: Colors.red,width: 1,style:BorderStyle.solid) ,//设置边框
    )

浮动按钮,圆形带阴影,一般在Scaffold中设置
     FloatingActionButton(
       child: Text("浮动"),
       onPressed: (){},
       backgroundColor: Colors.blue,
     )

按钮组,水平排列多个按钮
	ButtonBar(
      children: <Widget>[
			按钮一
			按钮二
      ]),

代码示例:

import 'package:flutter/material.dart';

class Home4 extends StatefulWidget {
  Home4({Key key}) : super(key: key);

  @override
  _Home2State createState() => _Home2State();
}

class _Home2State extends State<Home4> {
  @override
  Widget build(BuildContext context) {
    return Container(
       child: Column(children: <Widget>[

        RaisedButton(
          child: Text('添加回调函数才生效'),
          onPressed: (){},
          color:Theme.of(context).accentColor,
          elevation: 20.0,
          shape:RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(20),
            // side:BorderSide(color: ,width:,style: BorderStyle.solid/none)
          )
        ),

        Divider(),

        //文字前加字体图标的按钮,其他属性和普通按钮相同
        RaisedButton.icon(
          onPressed: (){}, 
          icon: Icon(Icons.home), 
          label: Text('带图标'),
          shape: CircleBorder(
              side: BorderSide(color:Colors.blue,width: 1,style:BorderStyle.solid)
          ),
          ),
        
        Divider(),

        FlatButton( //扁平按钮,可以.icon带图标
          child: Text('按钮'),
          onPressed: (){},
          color: Colors.blue,
        ),
        
        Divider(),

        OutlineButton( //边框按钮背景无色,可以.icon带图标
        child: Text('扁平'),
        onPressed: (){},
        borderSide:BorderSide(color: Colors.red,width: 1,style:BorderStyle.solid) ,

        ),

        Divider(),

        IconButton(
          icon: Icon(Icons.hotel),
          onPressed: (){},
          iconSize: 20,
        ),

        Divider(),

        ButtonBar(
          children: <Widget>[
            RaisedButton.icon(
            onPressed: (){}, 
            icon: Icon(Icons.home), 
            label: Text('带图标'),
            shape: CircleBorder(
                side: BorderSide(color:Colors.blue,width: 1,style:BorderStyle.solid)
            ),
          ),

          FlatButton( //扁平按钮,可以.icon带图标
            child: Text('按钮'),
            onPressed: (){},
            color: Colors.blue,
          ),
          ]),

          Divider(),

          FloatingActionButton(//浮动按钮,圆形带阴影
            child: Text("浮动"),
            onPressed: (){},
            backgroundColor: Colors.blue,
            
          )
          

       ],),
    );
  }
}
发布了670 篇原创文章 · 获赞 4 · 访问量 2万+

猜你喜欢

转载自blog.csdn.net/weixin_43294560/article/details/105557207
今日推荐