Flutter 中的按钮组件，RaisedButton，FlatButton，OutlineButton，IconButton，ButtonBar-摩杜云开发者社区

Flutter 中的按钮组件，RaisedButton，FlatButton，OutlineButton，IconButton，ButtonBar_html

Flutter 按钮组件

Flutter里面有很多的Button组件很多，常见的按钮组件有：RaisedButton，FlatButton，IconButton，OutlineButton，ButtonBar，FloationActionButton等..

组件	描述
RaisedButton	凸起的按钮，其实就是Material Design风格的Button
FlatButton	篇平化的按钮
OutlineButton	线框按钮
IconButton	图标按钮
ButtonBar	按钮组件
FloatingActionButton	浮动按钮

Flutter 按钮组件中的一些通用属性

属性名称	值类型	属性值
onPressed	VoidCallback，一般接收一个方法	必填参数，按下按钮时触发的回调，接收一个方法，传null表示按钮禁用，会显示禁用相关样式
child	Widget	文本控件
textColor	Color	文本颜色
color	Color	按钮的颜色
disabledColor	Color	按钮禁用时的颜色
disabledTextColor	Color	按钮禁用时的文本颜色
splashColor	Color	点击按钮时水波纹的颜色
elevation	double	阴影的范围，值越大阴影范围越大
padding		内边距
shape		设置按钮的形状 shape: RoundedRectangleBorder( borderRadius:BorderRadius.circular(10), ) shape: CircleBorder( side: BorderSide( color:Colors.white, ) )

普通按钮

Flutter 中的按钮组件，RaisedButton，FlatButton，OutlineButton，IconButton，ButtonBar_Text_02

coding

import 'package:flutter/material.dart';
import 'package:flutterappbarapp/page/SearchPage.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Test Drawer',
      home: ScaffoldPage(),
    );
  }
}

class ScaffoldPage extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Drawer"),
      ),
      body: ButtonTest(),
    );
  }
}

class ButtonTest extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return  Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              RaisedButton(
                child: Text("普通按钮"),
                onPressed: (){//点击事件
                  print("普通按钮");
                },
              ),
              SizedBox(width: 30,),
              RaisedButton(
                child: Text("有颜色按钮"),
                color: Colors.blue,
                textColor: Colors.white,
                onPressed: (){
                  print("有颜色按钮");
                },
              ),
              SizedBox(width: 30,),
              RaisedButton(
                child: Text("有阴影按钮"),
                color: Colors.blue,//设置背景颜色
                textColor: Colors.white,
                elevation: 20,//设置阴影
                onPressed: (){
                  print("有阴影按钮");
                },
              )
            ],
          ),
        ],
      ),
    );
  }
}

设置宽高按钮，自适应按钮

Flutter 中的按钮组件，RaisedButton，FlatButton，OutlineButton，IconButton，ButtonBar_flutter_03

import 'dart:convert';

import 'package:flutter/material.dart';
import 'package:flutterappbarapp/page/SearchPage.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Test Drawer',
      home: ScaffoldPage(),
    );
  }
}

class ScaffoldPage extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Button"),
      ),
      body: ButtonTest(),
    );
  }
}

class ButtonTest extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return  Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Container(
                width: 200,
                height: 40,
                child: RaisedButton(
                  child: Text("设置宽高按钮"),
                  color: Colors.blue,
                  textColor: Colors.white,
                  elevation: 10,
                  onPressed: (){
                    print("设置宽高按钮");
                  },
                ),
              )
            ],
          ),
          Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Expanded(
                child: Container(
                  height: 40,
                  margin: EdgeInsets.all(20),
                  child: RaisedButton(
                    child: Text("自适应按钮"),
                    color: Colors.blue,
                    textColor: Colors.white,
                    elevation: 20,
                    onPressed: (){
                      print("自适应按钮");
                    },
                  ),
                ),
              )
            ],
          )
        ],
      ),
    );
  }
}

图片按钮

Flutter 中的按钮组件，RaisedButton，FlatButton，OutlineButton，IconButton，ButtonBar_html_04

import 'dart:convert';

import 'package:flutter/material.dart';
import 'package:flutterappbarapp/page/SearchPage.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Test Drawer',
      home: ScaffoldPage(),
    );
  }
}

class ScaffoldPage extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Button"),
      ),
      body: ButtonTest(),
    );
  }
}

class ButtonTest extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return  Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              RaisedButton.icon(
                  onPressed: (){
                    print("RaisedButton 图标按钮");
                  },
                  color: Colors.blue,
                  textColor: Colors.white,
                  icon: Icon(Icons.search),
                  label: Text("图标按钮"),
                  shape: RoundedRectangleBorder(//设置按钮的形状
                    borderRadius: BorderRadius.circular(10)
                  ),
              ),
            ],
          ),
        ],
      ),
    );
  }
}

圆形按钮

Flutter 中的按钮组件，RaisedButton，FlatButton，OutlineButton，IconButton，ButtonBar_html_05

class ButtonTest extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return  Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Container(
                width: 100,
                height: 100,
                child:RaisedButton(
                  child: Text("圆形按钮"),
                  onPressed: (){
                    print("RaisedButton 图标按钮");
                  },
                  color: Colors.blue,
                  textColor: Colors.white,
                  elevation: 20,
                  shape: CircleBorder(
                    side: BorderSide(
                        color: Colors.white
                    ),
                  ),
                ),
              )
            ],
          ),
        ],
      ),
    );
  }
}

FlatButton 篇平化的按钮

Flutter 中的按钮组件，RaisedButton，FlatButton，OutlineButton，IconButton，ButtonBar_html_06

class ButtonTest extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return  Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              FlatButton(
                child: Text("篇平化按钮"),
                onPressed: (){
                  print("篇平化按钮");
                },
              )
            ],
          ),
        ],
      ),
    );
  }
}

OutlineButton线框按钮

Flutter 中的按钮组件，RaisedButton，FlatButton，OutlineButton，IconButton，ButtonBar_sed_07

class ButtonTest extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return  Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              OutlineButton(
                child: Text("线框按钮"),
                color: Colors.blue,
                textColor: Colors.yellow,
                onPressed: (){
                  print("线框按钮");
                },
              )
            ],
          ),
        ],
      ),
    );
  }
}

IconButton图片按钮

Flutter 中的按钮组件，RaisedButton，FlatButton，OutlineButton，IconButton，ButtonBar_Text_08

class ButtonTest extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return  Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              IconButton(
                icon: Icon(Icons.settings),
                onPressed: (){
                  print("IconButton");
                },
              )
            ],
          ),
        ],
      ),
    );
  }
}

ButtonBar 按钮组件

Flutter 中的按钮组件，RaisedButton，FlatButton，OutlineButton，IconButton，ButtonBar_Text_09

class ButtonTest extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return  Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              ButtonBar(
                children: [
                  RaisedButton(
                    child: Text("登录"),
                    color: Colors.blue,
                    textColor: Colors.white,
                    elevation: 20,
                    onPressed: (){
                      print("点击登录");
                    },
                  ),
                  RaisedButton(
                    child: Text("注册"),
                    color: Colors.blue,
                    textColor: Colors.white,
                    elevation: 20,
                    onPressed: (){
                      print("点击注册");
                    },
                  ),
                ],
              )
            ],
          ),
        ],
      ),
    );
  }
}

Flutter FloatingActionButton介绍通过FloatingActionButton实现闲鱼app底部凸起按钮

通过FloatingActionButton实现闲鱼底部凸起按钮

javascript:void(0)

Flutter 中的按钮组件，RaisedButton，FlatButton，OutlineButton，IconButton，ButtonBar_flutter_10