flutter 按钮组件

川长思鸟来 2021-07-24 17:03 515阅读 0赞

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,
                
              )
              
    
           ],),
        );
      }
    }