Flutter Button Style 按钮样式

6,000 阅读1分钟

Flutter Button Style:

效果:
截屏2021-11-08 下午6.50.37.png

实现方法: 使用ButtonStyle():

无法直接设置样式,需要包裹 MaterialStateProperty.all

  • 背景颜色: backgroundColor
  • 背景Border:shape, RoundedRectangleBorder
  • padding: EdgeInsets
  • minimumSize & maximumSize
TextButton(
    style: ButtonStyle(
          backgroundColor: MaterialStateProperty.all(Color(0xFFE8E8E8)),
          shape: MaterialStateProperty.all(
            RoundedRectangleBorder(
              borderRadius: BorderRadius.circular(16.0),
            ),
          ),
          padding: MaterialStateProperty.all(
              EdgeInsets.symmetric(horizontal: 14.0, vertical: 6.0)),
          minimumSize: MaterialStateProperty.all(Size(0, 0)),
          maximumSize: MaterialStateProperty.all(Size(375.0, 36.0)),
        ),
        onPressed: () {},
        child: Text(
          'My Text',
          style: TextStyle(
            color: Color(0xFF646464),
            fontWeight: FontWeight.bold,
          ),
        ),
      ),