Skip to content

Commit

Permalink
Show horizontal scroll control button when hover on, close #1446.
Browse files Browse the repository at this point in the history
  • Loading branch information
@StageGuard
StageGuard committed Jan 8, 2025
1 parent be485d4 commit 96757a4
Show file tree
Hide file tree
Showing 2 changed files with 8 additions and 116 deletions.
98 changes: 3 additions & 95 deletions app/shared/src/desktopTest/kotlin/ui/foundation/HorizontalScrollControlScaffoldTest.kt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -124,7 +124,7 @@ class HorizontalScrollControlScaffoldTest {
// 目前在最左边, 所以左边按钮应该不可见
runOnIdle {
waitUntil { scrollControlLeftButton.doesNotExist() }
waitUntil { scrollControlRightButton.doesNotExist() }
waitUntil { scrollControlRightButton.exists() }
}
}

Expand All @@ -150,10 +150,9 @@ class HorizontalScrollControlScaffoldTest {
}
}

// 目前列表在最左边, 所以左边按钮应该不可见
runOnIdle {
waitUntil { scrollControlLeftButton.exists() }
waitUntil { scrollControlRightButton.doesNotExist() }
waitUntil { scrollControlRightButton.exists() }
}
}

Expand Down Expand Up @@ -181,7 +180,7 @@ class HorizontalScrollControlScaffoldTest {

// 目前列表在最右边, 所以左边按钮应该不可见
runOnIdle {
waitUntil { scrollControlLeftButton.doesNotExist() }
waitUntil { scrollControlLeftButton.exists() }
waitUntil { scrollControlRightButton.doesNotExist() }
}
}
Expand Down Expand Up @@ -210,99 +209,8 @@ class HorizontalScrollControlScaffoldTest {
}

// 目前列表在最右边, 所以左边按钮应该不可见
runOnIdle {
waitUntil { scrollControlLeftButton.doesNotExist() }
waitUntil { scrollControlRightButton.exists() }
}
}

@Test
fun `too many items - both buttons - composite test`() = runAniComposeUiTest {
val listState = LazyListState()

setContent {
View(listState, itemCount = 10)
}

// 初始在最左侧；左按钮不可见，右按钮也不可见（鼠标不在两边）
runOnIdle {
waitUntil { scrollControlLeftButton.doesNotExist() }
waitUntil { scrollControlRightButton.doesNotExist() }
}

// 移动鼠标到左边，虽然在最左侧无法再向左滚动，但仍测试一下：左按钮不应出现
runOnIdle {
lazyList.performMouseInput {
moveTo(centerLeft + Offset(10f, 0f))
}
}
runOnIdle {
waitUntil { scrollControlLeftButton.doesNotExist() }
// 还没滚动过，右边也不出现
waitUntil { scrollControlRightButton.doesNotExist() }
}

// 往右滑一点，让列表可以向左滚动
runOnIdle {
lazyList.performTouchInput {
swipeLeft(centerX, centerX - 100) // 往左滑，向右滚动一些
}
}

// 鼠标移动到左侧，按钮应出现
runOnIdle {
lazyList.performMouseInput {
moveTo(centerLeft + Offset(10f, 0f))
}
}
runOnIdle {
waitUntil { scrollControlLeftButton.exists() }
// 此时由于鼠标在左侧，右侧按钮不一定出现
waitUntil { scrollControlRightButton.doesNotExist() }
}

// 再把鼠标移到右侧，左边按钮应该消失，右侧按钮出现
runOnIdle {
lazyList.performMouseInput {
moveTo(centerRight - Offset(10f, 0f))
}
}
runOnIdle {
waitUntil { scrollControlLeftButton.doesNotExist() }
// 若还能继续往右滚，就会显示右侧按钮
waitUntil { scrollControlRightButton.exists() }
}

// 再滑动到最右边
runOnIdle {
lazyList.performTouchInput {
repeat(10) { swipeLeft() } // 保证滑动到最右边
}
}
runOnIdle {
lazyList.performMouseInput {
moveTo(centerRight - Offset(10f, 0f))
}
}

runOnIdle {
waitUntil { scrollControlLeftButton.doesNotExist() }
waitUntil { scrollControlLeftButton.doesNotExist() }
}

runOnIdle {
lazyList.performTouchInput {
swipeRight(centerX, centerX + 100)
}
}
runOnIdle {
lazyList.performMouseInput {
moveTo(centerRight - Offset(10f, 0f))
}
}

runOnIdle {
waitUntil { scrollControlLeftButton.doesNotExist() }
waitUntil { scrollControlRightButton.exists() }
}
}
Expand Down
26 changes: 5 additions & 21 deletions ...ared/ui-foundation/src/commonMain/kotlin/ui/foundation/HorizontalScrollControlScaffold.kt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,15 +29,11 @@ import androidx.compose.runtime.setValue
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.rotate
import androidx.compose.ui.geometry.Offset
import androidx.compose.ui.geometry.isUnspecified
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.Shape
import androidx.compose.ui.input.pointer.PointerEventPass
import androidx.compose.ui.input.pointer.PointerEventType
import androidx.compose.ui.input.pointer.pointerInput
import androidx.compose.ui.layout.LayoutCoordinates
import androidx.compose.ui.layout.onPlaced
import androidx.compose.ui.unit.dp
import me.him188.ani.app.ui.foundation.text.ProvideContentColor

Expand All @@ -59,17 +55,16 @@ fun HorizontalScrollControlScaffold(
) {
Box(
modifier = modifier
.onPlaced { state.updateLayoutSize(it) }
.pointerInput(Unit) {
awaitPointerEventScope {
while (true) {
val event = awaitPointerEvent(PointerEventPass.Initial)
if (event.type == PointerEventType.Exit) {
state.calculateDistance(Offset.Unspecified)
state.calculate(false)
continue
}
event.changes.firstOrNull()?.let { pointerInputChange ->
state.calculateDistance(pointerInputChange.position)
state.calculate(true)
}
}
}
Expand Down Expand Up @@ -138,25 +133,14 @@ class HorizontalScrollControlState(
private val scrollableState: ScrollableState,
private val onClickScroll: (direction: Direction) -> Unit
) {
private var layoutWidth: Int by mutableStateOf(0)

var showLeftButton: Boolean by mutableStateOf(false)
private set
var showRightButton: Boolean by mutableStateOf(false)
private set

fun calculateDistance(position: Offset) {
if (position.isUnspecified || layoutWidth <= 0) {
showLeftButton = false
showRightButton = false
return
}
showLeftButton = scrollableState.canScrollBackward && position.x < layoutWidth / 2f
showRightButton = scrollableState.canScrollForward && position.x >= layoutWidth / 2f
}

fun updateLayoutSize(layoutCoordinates: LayoutCoordinates) {
layoutWidth = layoutCoordinates.size.width
fun calculate(hovered: Boolean) {
showLeftButton = hovered && scrollableState.canScrollBackward
showRightButton = hovered && scrollableState.canScrollForward
}

fun scrollBackward() {
Expand Down

0 comments on commit 96757a4

Please sign in to comment.