2022年9月21日 星期三

Flutter學習11-Decoration

Decoration是一個裝飾器，可以利用這個設置背景（邊框、圆角、陰影、形狀、漸變、背景圖像）。就是當你產生一個部件時，你可以在繪製前或後，在前景和背景中做一個裝飾的元件。

我們先看一下Decoration這個類別的建構式:

const DecoratedBox({ 
Decoration decoration, 
DecorationPosition position = DecorationPosition.background, 
Widget? child })

第一個命名參數是decoration，這裡要設定是繪製的方法。

第二個命名參數是position，

如果要畫在背景就選DecorationPosition.background，

如果要畫在前景就選DecorationPosition.foreground，

第三個命名參數是child，這裡是要裝飾的元件。


Decoration有的子類有 

一、BoxDecoration:

const BoxDecoration({
  this.color, //裝飾器顏色
  this.image,  //裝飾器圖案
  this.border, //邊線
  this.borderRadius, //四邊圓框角度
  this.boxShadow, //裝飾器陰影
  this.gradient,  //漸變的方式
  this.backgroundBlendMode, //與背景混合模式
  this.shape = BoxShape.rectangle,  //外形
}) : assert(shape != null),
     assert(
       backgroundBlendMode == null || color != null || gradient != null,
       "backgroundBlendMode applies to BoxDecoration's background color or "
       'gradient, but no color or gradient was provided.',
     );

(1)color 顏色設定的方法舉例(四種常用方法)

color:Colors.red, //直接選擇想要設定的顏色
color:Colors.blue.shade300, //後加shade100-900 由淺到深
color:Color.fromRGBO(300, 200, 100, 0.5), //給與R(紅)、G(綠)、B(藍) 以及透明度(0-1)
color: Color(0xFFFF0000), //給予色碼 https://www.ifreesite.com/color/

(2)image 圖片的方法

//加入背景圖片
  image: DecorationImage(
      image: NetworkImage('https://www.google.com.tw/images/branding/googlelogo/2x/googlelogo_color_92x30dp.png'), // 網路圖片
      // image: new AssetImage('graphics/googlelogo_color_92x30dp.png'), //本地圖片
      fit: BoxFit.fill // 填满
  ),

(3)border 邊線設定
主要有兩種設定情況，一是透過all，一定設定全部的線段，二是透過Border分別設置Top、Bottom、Left及Right的線段。
(3-1) Border.all() 
設定三個屬性
(color):線的顏色
with:線的寬度
style: nono不加線 或solid實線
 
//邊線設定
border:Border.all(
  color: Colors.red,
  width: 1.0,
  style:BorderStyle.solid,
),

(3-2) Border(left:BorderSide()),
border: Border(
  left: BorderSide(
    color: Color(0XFFFF6D64),
    width: 2.0,
  ),
),

(4)borderRadius 邊界周圍填加曲線
 首先要注意是，需與上面的border相互配合，若設定四邊，才能設定四個角的曲線。
有五種設定的方法:
(4-1)BorderRadius.all() 將四個角同時設定成同一形式
borderRadius: BorderRadius.all(Radius.circular(20)),  //全部的角都設定為圓角
(4-2)BorderRadius.horizontal()  設定水平兩邊的形式
borderRadius: BorderRadius.horizontal(left: Radius.circular(5),right: Radius.circular(20)), //設定左右兩邊，沒有設定預設為0

(4-3)BorderRadius.horizontal()  設定上下兩邊的形式
borderRadius: BorderRadius.vertical(top: Radius.circular(5),bottom: Radius.circular(20)), //設定上下兩邊，沒有設定預設為0
(4-4)BorderRadius.only() 設定上下左右的形式
borderRadius: BorderRadius.only(
  topLeft: Radius.circular(5),
  topRight: Radius.circular(10),
  bottomLeft: Radius.circular(15),
  bottomRight: Radius.circular(20),), //分別設置上下左右

(4-5)BorderRadius.circular(20)  直接設置圓角
borderRadius:BorderRadius.circular(20),

(5)boxShadow 裝飾器的陰影
boxShadow 
BoxShadow的属性
BoxShadow一共有五個属性：
color：顏色
offset：設定偏移量
blurRadius：陰影的模糊度。(0-50)
spreadRadius：陰影的擴張大小。
blurStyle:有下列三種 
BlurStyle.outer(在spreadRadius設定的範圍外擴散)  
BlurStyle.inner(在spreadRadius設定的範圍內擴散)  
BlurStyle.normal(在spreadRadius設定的範圍內外擴散)  

//陰影設定
boxShadow: [
  BoxShadow(
    color: Colors.black54, //陰影顏色
    offset: Offset(3.0, -2.0), //陰影和原物體的偏移角度,此指向x偏移3pt，向y軸偏移-2
    blurRadius: 50.0,  //模糊程度
    spreadRadius: 10.0,  //模糊大小
    blurStyle: BlurStyle.normal,
  ),
]),

(6)gradient 漸變方式
    (6-1)LinearGradient：線性漸變
gradient: LinearGradient(
  begin: Alignment.topCenter,  //起始點 由上中起始
  end: Alignment.bottomCenter, //結束點 //由下終結束

  colors: [Colors.red, Colors.blue, Colors.green], //顏色為紅藍綠三色
  stops: [0.2,0.3,0.8], //顏色的分配比例
  tileMode:TileMode.repeated,
  //TileMode有三種情況：clamp 默認自動延伸；repeated 重複效果；mirror 鏡面。

(6-2)RadialGradient：放射性漸變

gradient:RadialGradient(
  center: Alignment.center, //以那裡為放射的中心點
  radius: 0.9, //放射的半徑大小
  colors: <Color>[Colors.red, Colors.blue,Colors.orange], //放射的顏色
  stops: [0.2,0.5,0.8],  //放射的比例分配
  tileMode:TileMode.repeated,
  //TileMode有三種情況：clamp 默認自動延伸；repeated 重複效果；mirror 鏡面。*/
),

  • SweepGradient：扇形漸變
gradient:SweepGradient(
  center: Alignment.center, //以那裡為放射的中心點
  startAngle:0.0,  //開始的角度
  endAngle: 3*pi*2, //結束的角度
  colors: <Color>[
  Colors.red,
  Colors.blue
  ], //放射的顏色
),





(二)ShapeDecoration:


(三)FlutterLogoDecoration:裝飾FlutterLogo


(三)UnderlineTabindicator:下滑線。


參考資料:
各種外形的作法
張貼者： 於

沒有留言:

張貼留言

訂閱： 張貼留言 (Atom)