本地圖片設(shè)置

1、在配置文件pubspec.yaml中，設(shè)置以下代碼

assets:
    - assets/
    - assets/test/

2、如果目錄中沒有assets文件夾，則創(chuàng)建一個文件夾，并且取名為assets，在此文件夾中存放圖片資源即可，如果想分文件夾管理，在assets目錄下創(chuàng)建文件夾，并且在配置文件pubspec.yaml中加入路徑即可

3、圖片的使用、在界面文件中，有的需要設(shè)置圖片大小，目前給出三種方式
（1）使用Container容器，對子類圖片進(jìn)行控制

Container(
   margin: EdgeInsets.only(right: 20, left: 10),
   width: 81,
   height: 64,
   child: Image.asset("assets/login/select.png"),
   )

（2）使用SizedBox容器，對子類圖片進(jìn)行控制

SizedBox(
   width: 81,
   height: 64,
   child: Image.asset("assets/login/select.png"),
   )

（3）使用Image組件，可以對圖片進(jìn)行顏色設(shè)置，大小控制

Image(
   width: 81,
   height: 64,
   image: AssetImage("assets/login/select.png"),
   )

背景設(shè)置

1、容器背景設(shè)置
容器的背景設(shè)置，只有Container容器可以設(shè)置背景，SizedBox是不行的，其他的應(yīng)該也有的，目前就還沒有用上。以下代碼就是對容器增加背景圖片。一般設(shè)置了image的話，可以不設(shè)置color。

Container(
   height: 327.w,
    width: double.infinity,
    child: _titleHeadhall(),//自定義的組件，背景之上的
    decoration: BoxDecoration(
      image: DecorationImage(
          image: AssetImage("assets/common/bg_home.png"),
          fit: BoxFit.fill),
    ),
  )

2、按鈕背景設(shè)置
這種方式，只能修改按鈕的顏色，貌似是不能增加圖片的，有大佬知道的話，可以留言告知一下，謝謝。

ElevatedButton(
     onPressed:  () {//按鈕點擊事件
            },
      child: Text("保存"),  //按鈕顯示文字
      style: ButtonStyle(
        backgroundColor: MaterialStatePropertyAll(Colors.orange),//顏色值
        shape: MaterialStateProperty.all(
          RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(10), // 圓角半徑，四個角的弧度
          ),
        ),
      ),
    )

（1）按鈕不可以點擊
在flutter4中，沒有了isenable的值，我們使用另外一種方式，將按鈕的點擊事件設(shè)置為null，及可以使按鈕不可以點擊

ElevatedButton(
     onPressed: null,
      child: Text("保存"),
      style: ButtonStyle(
        backgroundColor: MaterialStatePropertyAll(Colors.orange),//顏色值
        shape: MaterialStateProperty.all(
          RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(10), // 圓角半徑，四個角的弧度
          ),
        ),
      ),
    )

可以設(shè)置圖片的按鈕

這是一種類似按鈕的組件，可以進(jìn)行點擊響應(yīng)事件，和按鈕的不同，就是沒有點擊響應(yīng)動畫，不過這些都是可以自己添加的。文章來源地址http://www.zghlxwxcb.cn/news/detail-767160.html

GestureDetector(
    onTap: () {},//點擊響應(yīng)事件
      child: Container(
	  	height: 327.w,
	    width: double.infinity,
	    child: _titleHeadhall(),//自定義的組件，背景之上的
	    decoration: BoxDecoration(
	      image: DecorationImage(
	          image: AssetImage("assets/common/bg_home.png"),//容器的背景圖片
	          fit: BoxFit.fill),
	    ),
	  ),
    )

到了這里，關(guān)于flutter背景圖片設(shè)置的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！