Flutter中的按钮组件 RaisedButton、FlatButton、IconButton、OutlineButton、ButtonBar、FloatingActionButton

发布于 5 个月前 作者 phonegap100 338 次浏览 来自 分享

一、Flutter中的按钮组件

Flutter 里有很多的 Button组件很多,常见的按钮组件有:RaisedButton、FlatButton、IconButton、OutlineButton、ButtonBar、FloatingActionButton 等。

RaisedButton :凸起的按钮,其实就是Material Design风格的Button FlatButton :扁平化的按钮 OutlineButton:线框按钮 IconButton :图标按钮 ButtonBar:按钮组 FloatingActionButton:浮动按钮

二、Flutter 按钮组件中的一些属性

onPressed

VoidCallback ,一般接收一个方法 必填参数,按下按钮时触发的回调,接收一个方法,传null表示按钮禁用,会显示禁用相关样式

child 文本控件 textColor 文本颜色 color 按钮的颜色 disabledColor 按钮禁用时的颜色 disabledTextColor 按钮禁用时的文本颜色 splashColor 点击按钮时水波纹的颜色 highlightColor 点击(长按)按钮后按钮的颜色 elevation 阴影的范围,值越大阴影范围越大 padding 内边距 shape 设置按钮的形状

shape: RoundedRectangleBorder( borderRadius: BorderRadius.circular(10), )

shape: CircleBorder( side: BorderSide( color: Colors.white, ) )

三、Flutter 按钮组件的使用

import 'package:flutter/material.dart';

class ButtonDemoPage extends StatelessWidget {
  const ButtonDemoPage({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("按钮演示页面"),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                RaisedButton(
                  child: Text('普通按钮'),
                  onPressed: () {
                    print('点击了');
                  },
                ),
                SizedBox(width: 20),
                RaisedButton(
                  child: Text('有颜色的按钮'),
                  textColor: Colors.white,
                  color: Colors.blue,
                  onPressed: () {
                    print('点击了');
                  },
                ),
                SizedBox(width: 20),
                RaisedButton(
                  child: Text('阴影按钮'),
                  textColor: Colors.white,
                  color: Colors.blue,
                  elevation:10,
                  onPressed: () {
                    print('点击了');
                  },
                )
              ],
            ),
             SizedBox(height: 40),
             Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                 Container(
                   height: 60,
                   width: 200,
                   child: RaisedButton(
                    child: Text('有宽高的按钮'),
                    textColor: Colors.white,
                    color: Colors.blue,
                    elevation:10,                    
                    onPressed: () {
                      print('点击了');
                    },
                  )
                 )
              ],
             ),
             SizedBox(height: 40),
             Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                 Expanded(                                 
                   child: Container(
                     height: 60,
                     margin: EdgeInsets.all(20),
                     child: RaisedButton(
                        child: Text('全屏按钮'),
                        textColor: Colors.white,
                        color: Colors.blue,
                        elevation:10,                    
                        onPressed: () {
                          print('点击了');
                        },
                      ),
                   )
                 )
              ],
             ),
             Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                 Expanded(                                 
                   child: Container(
                     height: 60,
                     margin: EdgeInsets.all(20),
                     child: RaisedButton(
                        child: Text('带圆角的按钮'),
                        textColor: Colors.white,
                        color: Colors.blue,
                        elevation:10,    
                       
                        shape: RoundedRectangleBorder(
                           borderRadius: BorderRadius.circular(10),
                        ),
                        onPressed: () {
                          print('点击了');
                        },
                      ),
                   )
                 )
              ],
             )
          ],
        ),
      ),
    );
  }
}
回到顶部