flutter ElevatedButton使用時遇到的一些問題記錄

設置圓角

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, // 響應觸摸的區(qū)域
  this.animationDuration, //[shape]和[elevation]的動畫更改的持續(xù)時間。
  this.enableFeedback, // 檢測到的手勢是否應提供聲音和/或觸覺反饋。例如,在Android上,點擊會產(chǎn)生咔噠聲,啟用反饋后,長按會產(chǎn)生短暫的振動。通常,組件默認值為true。
});

這些屬性在設置的屬性在設置的時候需要用到MaterialStateProperty 的方式進行設置,
shape在設置的時候需要用 OutlinedBorder的子類的構(gòu)造方法進行設置

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

設置button的大小

想要實現(xiàn)的效果是按鈕據(jù)屏幕左右邊距各有40px,根據(jù)不同的屏幕寬度自己適應,所以我在外邊放了一個Container 設置了左右margin,然后再里邊放ElevateButton,但是ElevateButton的寬度卻不能撐滿Container,就想在ElevateButton外邊嵌套一個SizeBox,SizeBox設置寬度的話,ElevateButton能夠盛滿SizeBox,但是我想讓SizeBox的寬度撐滿Container,SizeBox的寬度就不能設置固定,然后發(fā)現(xiàn)網(wǎng)上寬度可以設置為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的實現(xiàn)思路很難實現(xiàn),也很難找到合適的控件,以后要多看一下flutter的布局實現(xiàn)思路,按照flutter的布局思路解決問題。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

相關閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容