唯客微博客

专注于计算机，嵌入式领域的技术

0%

发表于 更新于 分类于

形状(Shape)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// 切角/圆角形状基类
abstract class CornerBasedShape : Shape
// 绝对切角形状
class AbsoluteCutCornerShape : CornerBasedShape
// 绝对圆角形状
class AbsoluteRoundedCornerShape : CornerBasedShape
// 切角形状
class CutCornerShape : CornerBasedShape
// 圆角形状
class RoundedCornerShape : CornerBasedShape

// 圆形
val CircleShape: RoundedCornerShape
// 常规形状, 需要自定义形状路径
class GenericShape : Shape
  • 四个角相同大小
    • CornerSize：以像素为单位定义角的大小
    • size: Dp：dp
    • size: Float：像素
    • percent: Int：百分比
  • 四个角不同大小：分别指定四个角的dp/像素/百分比

发表于 更新于 分类于

Modifier 边框(Border)

1
2
3
fun Modifier.border(border: BorderStroke, shape: Shape)
fun Modifier.border(width: Dp, color: Color, shape: Shape)
fun Modifier.border(width: Dp, brush: Brush, shape: Shape)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
Column {
    Text(
        "Text with  square border",
        modifier = Modifier
        .border(4.dp, Color.Magenta,
                shape = CutCornerShape(8.dp))
        .padding(10.dp)
    )

    Text(
        "Text with gradient border",
        modifier = Modifier
        .border(
            border = BorderStroke(2.dp, Color.Blue),
            shape = CutCornerShape(8.dp)
        )
        .padding(10.dp)
    )

    val gradientBrush = Brush.horizontalGradient(
        colors = listOf(Color.Red, Color.Blue, Color.Green),
        startX = 0.0f,
        endX = 500.0f,
        tileMode = TileMode.Repeated
    )

    Text(
        "Text with gradient border",
        modifier = Modifier
        .border(width = 2.dp, brush = gradientBrush, shape = CircleShape)
        .padding(10.dp)
    )
}

发表于 更新于 分类于

Modifier 互斥选择(Selectable)

selectableGroup 使用此修饰符将Tabs 或 RadioButtons 等项目列表组合在一起。

selectable 修饰符指示此控件可选中

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
fun Modifier.selectableGroup()

fun Modifier.selectable(
    selected: Boolean,
    enabled: Boolean = true,
    role: Role? = null,
    onClick: () -> Unit
)

fun Modifier.selectable(
    selected: Boolean,
    interactionSource: MutableInteractionSource,
    indication: Indication?,
    enabled: Boolean = true,
    role: Role? = null,
    onClick: () -> Unit
)
  • selected: 此项是否在互斥集中被选中
  • enabled: 启用选中
  • interactionSource: 选中时发出此状态
  • indication: 按下修改后的元素时显示的指示。设置为null不显示任何指示。
  • role: 用户界面元素的类型。
  • onClick: 单击此项目时调用的回调
阅读全文 »

发表于 更新于 分类于

Modifier 对齐(Alignment)

1
2
3
4
5
6
7
8
9
10
11
// 用于Box
fun Modifier.align(alignment: Alignment)
// 用于Row
fun Modifier.align(alignment: Alignment.Vertical)
fun Modifier.alignByBaseline() // 基线对齐
fun Modifier.alignBy(alignmentLine: HorizontalAlignmentLine)
fun Modifier.alignBy(alignmentLineBlock: (Measured) -> Int)
// 用于Column
fun Modifier.align(alignment: Alignment.Horizontal)
fun Modifier.alignBy(alignmentLine: VerticalAlignmentLine)
fun Modifier.alignBy(alignmentLineBlock: (Measured) -> Int)
  • Alignment.Start
  • Alignment.End
  • Alignment.CenterHorizontally
  • Alignment.Top
  • Alignment.Bottom
  • Alignment.CenterVertically
  • Alignment.TopCenter
  • Alignment.TopStart
  • Alignment.TopEnd
  • Alignment.Center
  • Alignment.CenterStart
  • Alignment.CenterEnd
  • Alignment.BottomCenter
  • Alignment.BottomStart
  • Alignment.BottomEnd

发表于 更新于 分类于

Modifier 开关(Toggleable)

toggleable 修饰符非常适合用来做开关效果

triStateToggleable 修饰符为三态开关（启用、停用和不确定）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
fun Modifier.toggleable(
    value: Boolean,
    enabled: Boolean,
    role: Role?,
    onValueChange: (Boolean) -> Unit
)

fun Modifier.toggleable(
    value: Boolean,
    interactionSource: MutableInteractionSource,
    indication: Indication?,
    enabled: Boolean,
    role: Role?,
    onValueChange: (Boolean) -> Unit
)

fun Modifier.triStateToggleable(
    state: ToggleableState,
    enabled: Boolean,
    role: Role?,
    onClick: () -> Unit
)

fun Modifier.triStateToggleable(
    state: ToggleableState,
    interactionSource: MutableInteractionSource,
    indication: Indication?,
    enabled: Boolean,
    role: Role?,
    onClick: () -> Unit
)
  • value: Toggleable 是打开还是关闭
  • enabled: 启用Toggleable
  • interactionSource: 按下时发出此状态
  • indication: 按下修改后的元素时显示的指示。默认情况下，LocalIndication将使用指示。传递null以显示无指示，
  • role: 用户界面元素的类型。
  • onValueChange: 单击 toggleable 时调用的回调
  • onClick: 在用户单击可切换时调用
阅读全文 »

发表于 更新于 分类于

Modifier 拖动(Draggable)

draggable 修饰符允许开发者监听UI组件的拖动手势偏移量，通过偏移量从而可以定制UI动画效果。

draggable 修饰符只能监听垂直方向偏移或水平方向偏移。

1
2
3
4
5
6
7
8
9
10
fun Modifier.draggable(
    state: DraggableState,
    orientation: Orientation,
    enabled: Boolean = true,
    interactionSource: MutableInteractionSource? = null,
    startDragImmediately: Boolean = false,
    onDragStarted: suspend CoroutineScope.(startedPosition: Offset) -> Unit = {},
    onDragStopped: suspend CoroutineScope.(velocity: Float) -> Unit = {},
    reverseDirection: Boolean = false
)
  • state: 通过 draggableState 可以获取到拖动手势的偏移量，并允许开发者动态控制偏移量
  • orientation: 监听的拖动手势方向，只能是水平方向(Orientation.Horizontal)或垂直方向(Orientation.Vertical)
  • enabled: 启用拖动
  • interactionSource: 拖动时发出此状态
  • startDragImmediately: 设置为true时，DragTable将立即开始拖动，并防止其他手势检测器对“向下”事件作出反应（以阻止合成的基于按键的手势）
  • onDragStarted: 开始拖动的回调
  • onDragStopped: 停止拖动的回调
  • reverseDirection: 反转滚动的方向，从上到下滚动将表现为从下到上，从左到右将表现为从右到左。
阅读全文 »

发表于 更新于 分类于

Modifier 滑动(Swipeable)

swipeable 修饰符允许开发者通过锚点设置从而实现组件呈现吸附效果的动画，常用于开关等动画，也可用于下拉刷新等特殊效果的实现。

swipeable 修饰符不会为被修饰的组件提供任何默认动画，只能为组件提供手势偏移量等信息。开发者可根据自身需求根据偏移量结合其他修饰符定制动画展示。

1
2
3
4
5
6
7
8
9
10
11
fun <T : Any?> Modifier.swipeable(
    state: SwipeableState<T>,
    anchors: Map<Float, T>,
    orientation: Orientation,
    enabled: Boolean = true,
    reverseDirection: Boolean = false,
    interactionSource: MutableInteractionSource? = null,
    thresholds: (from, to) -> ThresholdConfig = { _, _ -> FixedThreshold(56.dp) },
    resistance: ResistanceConfig? = resistanceConfig(anchors.keys),
    velocityThreshold: Dp = VelocityThreshold
)
  • state: 通过 swipeableState 的设置可以获取到当前手势的偏移量信息
  • anchors: 锚点，可以通过锚点设置在不同状态时所应该对应的偏移量信息
  • orientation: 手势方向，被修饰组件的手势方向只能是水平或垂直
  • enabled: 启用滑动
  • reverseDirection: 反转滚动的方向，从上到下滚动将表现为从下到上，从左到右将表现为从右到左。
  • interactionSource: 滑动时发出此状态
  • thresholds: 常用作定制不同锚点间吸附效果的临界阈值，常用有 FixedThreshold(Dp) 和FractionalThreshold(Float)等
  • resistance: 控制滑动越过边界时将应用多少阻力。
  • velocityThreshold: 最终速度必须超过的阈值（以 dp 为单位）以动画到下一个状态
阅读全文 »

发表于 更新于 分类于

Modifier 点击(Clickable & CombinedClickable)

1. Clickable 点击

Clickable 修饰符用来监听组件的点击操作，并且当点击事件发生时会为被点击的组件施加一个波纹涟漪效果动画的蒙层。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
fun Modifier.clickable(
  enabled: Boolean = true,
  onClickLabel: String? = null,
  role: Role? = null,
  onClick: () -> Unit
)
	
fun Modifier.clickable(
    interactionSource: MutableInteractionSource,
    indication: Indication?,
    enabled: Boolean,
    onClickLabel: String?,
    role: Role?,
    onClick: () -> Unit
)

  • enabled: 启用点击

  • onClickLabel: 无障碍提示文本

  • role: 无障碍提示控件的类型

  • indication: 默认为LocalIndication.current，设置为null禁用水波纹效果

  • interactionSource: 点击状态源

阅读全文 »

发表于 更新于 分类于

Ubuntu切换软件版本 - 以g++为例

1. 将各个版本添加到列表中

1
2
sudo update-alternatives --install /usr/bin/g++ g++ /usr/bin/g++-11 11
sudo update-alternatives --install /usr/bin/g++ g++ /usr/bin/g++-12 12

2. 列出已经配置版本

1
sudo update-alternatives --list g++
阅读全文 »