Buttons - flutter_buttons flutter 2-优快云博客

本文链接：https://blog.youkuaiyun.com/LiErDan/article/details/110729474

本文详细介绍了Flutter中多种按钮组件的使用方法，包括RaisedButton、FlatButton、OutlineButton等，并通过实例展示了如何设置按钮样式及响应事件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
class Time extends StatefulWidget {
  @override
  _TimeState createState() => _TimeState();
}

class _TimeState extends State<Time> {
  @override
  Widget build(BuildContext context) {
    return Container(
      child:Column(
        children: [
          Row(
            children: [
              Expanded(
                flex: 4,
                child: Container(
                  //改变 Container的宽高,RaisedButton会跟随改变
                  //在没有Container的情况下, RaisedButton会随着 Expanded 的大小而改变, Expanded 默认填充整个Row
                  //   height: 50,
                  //   height: 50,
                    child:RaisedButton(
                        child: Text("What ?"),
                        color: Colors.pink,
                        textColor: Colors.white,
                        elevation: 10, //很轻的阴影效果
                        onPressed: (){
                          print("what onpress.");
                        }
                    )
                ),
              ),
              Expanded(
                flex: 2,
                //带图标的按钮
                child: RaisedButton.icon(
                  onPressed: (){},
                  icon:Icon(Icons.home),
                  label: Text("点我"),
                  color: Colors.deepOrangeAccent,
                  textColor: Colors.white,
                  elevation: 10, //阴影
                  //圆角
                  shape: RoundedRectangleBorder(
                    borderRadius: BorderRadius.circular(50)
                  ),
                ),
              ),
            ],
          ),

          Container(
            height: 100,
            width: 100,
            child: RaisedButton.icon(
              onPressed: (){},
              icon:Icon(Icons.home),
              label: Text("点我"),
              color: Colors.deepOrangeAccent,
              textColor: Colors.white,
              elevation: 10, //阴影
              splashColor: Colors.blue, //被点击时水波纹动画效果
              // shape 翻译为形状, 这是原型的RaiseButton
              shape: CircleBorder(
                  side: BorderSide(
                      color: Colors.orange
                  )
              ),
            ),
          ),
          //扁平按钮, 默认无边框, 用法和RaisedButton 一致
          FlatButton(
              onPressed: (){},
              child: Text("无边框按钮"),
              // color: Colors.orange,
          ),
          //有边框按钮, 用法和RaiseButton 一致
          OutlineButton(
            onPressed: (){},
            child: Text("有边框按钮"),
          ),
          IconButton(icon: Icon(Icons.home), onPressed: (){
            print("1");
          }),
          //一组按钮
          ButtonBar(
            alignment: MainAxisAlignment.center,
            children: [
              RaisedButton(
                  child: Text("What ?"),
                  color: Colors.pink,
                  textColor: Colors.white,
                  elevation: 10, //很轻的阴影效果
                  onPressed: (){
                    print("what onpress.");
                  }
              ),
              RaisedButton(
                  child: Text("What ?"),
                  color: Colors.pink,
                  textColor: Colors.white,
                  elevation: 10, //很轻的阴影效果
                  onPressed: (){
                    print("what onpress.");
                  }
              ),
              RaisedButton(
                  child: Text("What ?"),
                  color: Colors.pink,
                  textColor: Colors.white,
                  elevation: 10, //很轻的阴影效果
                  onPressed: (){
                    print("what onpress.");
                  }
              ),

            ],

          ),
        ],
      ),
    );
  }
}