Flutter new button widget

最新推荐文章于 2024-11-15 05:22:39 发布

weixin_53963450

最新推荐文章于 2024-11-15 05:22:39 发布

阅读量228

点赞数 2

分类专栏： flutter 文章标签： flutter

本文链接：https://blog.csdn.net/weixin_53963450/article/details/141968245

版权

flutter 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

TextButton

TextButton(
  child: Text(
    'Custom TextButton',
    style: TextStyle(color: Colors.white, fontSize: 18),
  ),
  style: ButtonStyle(
    backgroundColor: MaterialStateProperty.all<Color>(Colors.blue),
    foregroundColor: MaterialStateProperty.all<Color>(Colors.black),
    padding: MaterialStateProperty.all<EdgeInsets>(EdgeInsets.all(16)),
  ),
  onPressed: () {
    // 按钮点击事件
  },
)

ElevatedButton

ElevatedButton(
  onPressed: () {
    // 按钮点击事件
  },
  child: Text('Custom Button'),
  style: ElevatedButton.styleFrom(
    primary: Colors.blue, // 按钮背景颜色
    onPrimary: Colors.white, // 按钮文本颜色
    padding: EdgeInsets.symmetric(horizontal: 20, vertical: 15),
    textStyle: TextStyle(fontSize: 16),
  ),
  shape: RoundedRectangleBorder(
    borderRadius: BorderRadius.circular(10),
  ),
)

OutlinedButton

修改样式

style: ButtonStyle(
 textStyle: MaterialStateProperty.all(
            TextStyle(fontSize: 18, color: Colors.red)),
        //设置按钮上字体与图标的颜色
    ///设置文本不通状态时颜色
  foregroundColor: MaterialStateProperty.resolveWith(
        (states) {
      if (states.contains(MaterialState.focused) &&
          !states.contains(MaterialState.pressed)) {
        //获取焦点时的颜色
        return Colors.blue;
      } else if (states.contains(MaterialState.pressed)) {
        //按下时的颜色
        return Colors.deepPurple;
      }
      //默认状态使用灰色
      return Colors.grey;
    },
  ),
  //按钮背景颜色
  backgroundColor: MaterialStateProperty.resolveWith((states) {
    //设置按下时的背景颜色
    if (states.contains(MaterialState.pressed)) {
      return Colors.yellow[300];
    }
    //默认不使用背景颜色
    return null;
  }),
  ///设置水波纹颜色
  overlayColor: MaterialStateProperty.all(Colors.yellow),
  ///按钮大小
  minimumSize: MaterialStateProperty.all(Size(320, 36)),
 //设置阴影  不适用于这里的TextButton
elevation: MaterialStateProperty.all(0),
 //设置按钮内边距
padding: MaterialStateProperty.all(EdgeInsets.all(10)),
  ///设置按钮圆角
  shape: MaterialStateProperty.all(RoundedRectangleBorder(
      borderRadius: BorderRadius.circular(5))),
  ///设置按钮边框颜色和宽度                
  side: MaterialStateProperty.all(
      BorderSide(color: ColorStyle.color_4A6081, width: 1)),
),

带图标的button

ElevatedButton(
  child: Row(
        mainAxisSize = MainAxisSize.min
    children: const [Icon(Icons.add), Text('铺满的按钮')],
  ),
  onPressed: () {},
), 

ElevatedButton.icon(
  icon: const Icon(Icons.abc),
  label: const Text('基本用法'),
  onPressed: () {},
),