美文网首页Flutter
flutter ElevatedButton使用时遇到的一些问题

flutter ElevatedButton使用时遇到的一些问题

作者: 银弹星空 | 来源:发表于2021-04-07 21:39 被阅读0次

    设置圆角

    1.ElevatedButton 设置样式需要通过buttonStyle设置
    buttonStyle可以设置的属性有:

    const ButtonStyle({
      this.textStyle, //字体
      this.backgroundColor, //背景色
      this.foregroundColor, //前景色
      this.overlayColor, // 高亮色,按钮处于focused, hovered, or pressed时的颜色
      this.shadowColor, // 阴影颜色
      this.elevation, // 阴影值
      this.padding, // padding
      this.minimumSize, //最小尺寸
      this.side, //边框
      this.shape, //形状
      this.mouseCursor, //鼠标指针的光标进入或悬停在此按钮的[InkWell]上时。
      this.visualDensity, // 按钮布局的紧凑程度
      this.tapTargetSize, // 响应触摸的区域
      this.animationDuration, //[shape]和[elevation]的动画更改的持续时间。
      this.enableFeedback, // 检测到的手势是否应提供声音和/或触觉反馈。例如,在Android上,点击会产生咔哒声,启用反馈后,长按会产生短暂的振动。通常,组件默认值为true。
    });
    

    这些属性在设置的属性在设置的时候需要用到MaterialStateProperty 的方式进行设置,
    shape在设置的时候需要用 OutlinedBorder的子类的构造方法进行设置

     style: ButtonStyle(
                elevation: MaterialStateProperty.all(0),
                backgroundColor: MaterialStateProperty.all(Color(0xffFCB605)),
                shape: MaterialStateProperty.all(RoundedRectangleBorder(
                borderRadius: BorderRadius.circular(35))),
              ),
    

    设置button的大小

    想要实现的效果是按钮据屏幕左右边距各有40px,根据不同的屏幕宽度自己适应,所以我在外边放了一个Container 设置了左右margin,然后再里边放ElevateButton,但是ElevateButton的宽度却不能撑满Container,就想在ElevateButton外边嵌套一个SizeBox,SizeBox设置宽度的话,ElevateButton能够盛满SizeBox,但是我想让SizeBox的宽度撑满Container,SizeBox的宽度就不能设置固定,然后发现网上宽度可以设置为double.infinity 无穷大,但是不会超出Container的宽度。

    Container(
          margin: EdgeInsets.only(
              right: ScreenUtil().setWidth(80),
              left: ScreenUtil().setWidth(80),
              top: ScreenUtil().setHeight(44)),
          alignment: Alignment.center,
          child: SizedBox(
            width: double.infinity,
            height: ScreenUtil().setHeight(70),
            child: ElevatedButton(
              style: ButtonStyle(
                elevation: MaterialStateProperty.all(0),
                backgroundColor: MaterialStateProperty.all(Color(0xffFCB605)),
                shape: MaterialStateProperty.all(RoundedRectangleBorder(
                    borderRadius: BorderRadius.circular(35))),
              ),
              onPressed: _userLogin,
              child: Text(
                '登录',
                style: TextStyle(color: Colors.white, fontSize: 15),
              ),
            ),
          ),
        )
    

    flutter的布局方式和Android的布局思路完全不同,一些基本的布局按照Android的实现思路很难实现,也很难找到合适的控件,以后要多看一下flutter的布局实现思路,按照flutter的布局思路解决问题。

    相关文章

      网友评论

        本文标题:flutter ElevatedButton使用时遇到的一些问题

        本文链接:https://www.haomeiwen.com/subject/rukpkltx.html