背景顏色漸變

背景顏色漸變

1
2
Brush.verticalGradient(
listOf(Color(0xFF149EE7), Color.White))

完整程式碼

1
2
3
4
5
6
7
8
9
Column(
  modifier = Modifier
    .fillMaxSize() //鋪滿全屏
    .background(
      //背景漸變色從上到下垂直漸變 從藍變白
      Brush.verticalGradient(
listOf(Color(0xFF149EE7), Color.White))
    )
){}

右上往左下漸變

1
2
3
4
5
6
7
  Brush.linearGradient(
    listOf(Color(0xffbb8378), Color.Transparent),
		  //x值為屏幕的寬度 y值為頂端0
    start = Offset(x = screenWidth, y = 0f), 
		  //x值為0 y值為屏幕的高度
    end = Offset(x = 0f, y = screenHeight) 
  )

完整程式碼

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
  var screenWidth: Float //螢幕寬度
  var screenHeight: Float //螢幕高度
  with(LocalDensity.current) {
  screenWidth = LocalConfiguration.current.screenWidthDp.dp.toPx()
  screenHeight = LocalConfiguration.current.screenHeightDp.dp.toPx()
  }
  //右上往左下漸變
  Box(
  modifier = Modifier
  .fillMaxSize()
  .background(
  Brush.linearGradient(
    listOf(Color(0xffbb8378), Color.Transparent),
		  //x值為屏幕的寬度 y值為頂端0
    start = Offset(x = screenWidth, y = 0f), 
		  //x值為0 y值為屏幕的高度
    end = Offset(x = 0f, y = screenHeight) 
  )
  )
  )

左下往右上漸變

img

1
2
start = Offset(x = 0f, y = screenHeight), 
end = Offset(x = screenWidth, y = 0f) 

完整程式碼

1
2
3
4
5
6
7
8
9
10
11
12
//左下往右上漸變
Box(
  modifier = Modifier
  .fillMaxSize()
  .background(
    Brush.linearGradient(
    listOf(Color(0xFF149EE7), Color.Transparent),
    start = Offset(x = 0f, y = screenHeight), 
    end = Offset(x = screenWidth, y = 0f) 
    )
  )
)

img

results matching ""

    No results matching ""