Accompanist FlowRow : is it possible to scroll down automatically in order to show an element?

Question

In my Jetpack Compose project, one of my components uses a FlowRow from Accompanist. But I don't know how to make the FlowRow scroll to a given "node".

Here the relevant code from my @Composable:

sealed class MovesNavigatorElement(open val text: String)
data class MoveNumber(override val text: String) : MovesNavigatorElement(text)
data class HalfMoveSAN(override val text: String) : MovesNavigatorElement(text)

@Composable
fun MovesNavigator(modifier: Modifier = Modifier, elements: Array<MovesNavigatorElement>, mustBeVisibleByDefaultElementIndex: Int) {
    val vertScrollState = rememberScrollState()

    FlowRow(
        modifier = modifier
            .background(color = Color.Yellow.copy(alpha = 0.3f))
            .verticalScroll(vertScrollState),
        mainAxisSpacing = 10.dp,
        crossAxisSpacing = 15.dp,
    ) {
        elements.map {
            Text(text = it.text, fontSize = 34.sp, color = Color.Blue, style= MaterialTheme.typography.body1)
        }
    }
}

Where you can see that I declare the "nodes" of the FlowRow as a list : the parameter elements. Also I'm using a ScrollState in the local variable vertScrollState.

But, let's say that I want to make it scroll to elements[30] : how should I do that ? Given that mustBeVisibleByDefaultElementIndex is the index of the element that must be visible by default. I mean, when composition occurs. But the user can change the position later of course.

In other words :

At composition : the element whose index is given is made visible
Then, before any other composition occurs of course, the user can scroll it with the scrollbar.

Richard Onslow Roper · Answer 1 · 2021-11-06T18:48:08.967

1

You just need to use the method parameter,

val state = rememberScrollState(initial = mustBeVisibleByDefault)

Better press Ctrl + P to see all possible combinations before going to even the web.

I kept this in case if anyone finds it helpful bizarrely:-

The ScrollState exposes scrollTo and animateScrollTo methods. You can easily use them to achieve the desired result. Refer to the docs

edited Nov 06 '21 at 18:48

answered Nov 06 '21 at 15:03

Richard Onslow Roper

5,477
2
11
42

Yes, I've seen those methods from the documentation. Thank you. But how could I target a specific element ? I mean how could I get the position of a given element registered in the `FlowRow` ? In my question, I said that I will pass the targeted element index in a parameter. If possible, of course. – loloof64 Nov 06 '21 at 18:23
It is unclear. Parameter to what? If you want it to be a parameter to the MovesNavigator Composable, either you are confused with how declarative programming works, or you have a specific use-case which is not completely portrayed by the question. Just add a simple image of the expected layout and explain the behaviour in layman terms? The problem with most askers is that they send out technical questions asking for how to make an approach work, whereas if you post the use-case, we might be able to suggest a simpler and better approach altogether. – Richard Onslow Roper Nov 06 '21 at 18:32
You want it to scroll to a position when? Is it that you want it to load at a particular index? – Richard Onslow Roper Nov 06 '21 at 18:33
Or scroll using some navigators or something. Just post the use-case – Richard Onslow Roper Nov 06 '21 at 18:33
I've added a parameter `mustBeVisibleElementIndex` – loloof64 Nov 06 '21 at 18:34
That doesn't clear up much. – Richard Onslow Roper Nov 06 '21 at 18:37
You want a particular item visible that's okay, but... it's weird can't you just add a human-readable description to it? – Richard Onslow Roper Nov 06 '21 at 18:37
It says `must`BeVisible. You want it to be always visible even if the user scrolls past it? – Richard Onslow Roper Nov 06 '21 at 18:38
Just edit the question sir – Richard Onslow Roper Nov 06 '21 at 18:38
Your question does not delineate your concern AT ALL! – Richard Onslow Roper Nov 06 '21 at 18:39
That is the problem – Richard Onslow Roper Nov 06 '21 at 18:39
I do not know WHAT your concern is – Richard Onslow Roper Nov 06 '21 at 18:39
I recognize my question missed many precisions : I've tried to fix that some time ago. – loloof64 Nov 06 '21 at 18:43
1

Oh! You should have said so. Now it is clear – Richard Onslow Roper Nov 06 '21 at 18:44
Sorry, but your solution is not yet what I'm trying to solve : you're initializing the scroll position with the index of the "node" to target. That's not enough. – loloof64 Nov 06 '21 at 19:32
Then what's enough? You don't specify anything other than that in your post – Richard Onslow Roper Nov 06 '21 at 19:33
Sir you do realise that the only way to convey your info to people over at stackoverflow is by actually typing it in your question? – Richard Onslow Roper Nov 06 '21 at 19:34
I think that my question has already clarified what I want – loloof64 Nov 06 '21 at 19:35
That's it! I'm calling the police! – Richard Onslow Roper Nov 06 '21 at 19:36
Woah woah woah, calm down sir. All I am saying, is that your question does not convey exactly what your are trying to achieve here. We are actually here to help, but if the required details are well submitted, it would be easier. You see, questions usually receive answers by this time, but this one hasn't, since it lacks clarity. Please read [how to ask a good question](https://stackoverflow.com/help/how-to-ask) – Richard Onslow Roper Nov 06 '21 at 19:41
It was a little joke. Meant no disrespect. I would still say you actually update the question with a valid use-case. – Richard Onslow Roper Nov 06 '21 at 19:41
I can't see how I can be more clear this time. If my question cannot be answered, I'm ready to give up now. – loloof64 Nov 06 '21 at 19:43
Ok wait up a moment – Richard Onslow Roper Nov 06 '21 at 19:43
You want the row to scroll to a given node. You did not mention exactly WHEN do you want it to happen. A button click? Some other triggers? How am I supposed to know where to put the scrolling code? – Richard Onslow Roper Nov 06 '21 at 19:45
Yeah so the answer I provided will do exactly the same. It will scroll to the item numbered `mustBeVisibleByDefault` at the first composition, then retain whichever position the user decides to scroll to – Richard Onslow Roper Nov 06 '21 at 19:51
What is the issue that did not get resolved? Please try to run once if you haven't. – Richard Onslow Roper Nov 06 '21 at 19:52
Hello? Sir? You there!? – Richard Onslow Roper Nov 06 '21 at 20:11
Yes. As I am still stuck with my issue, I think the best would be to go on with the SO chat – loloof64 Nov 06 '21 at 20:35
I have opened a session, but I don't play well with SO chat. This is convenient. – Richard Onslow Roper Nov 06 '21 at 20:40
I'm asking you because we are "flooding" the topic with comments – loloof64 Nov 06 '21 at 20:41
Yeah I've opened the session, but just tell me what the issue is, currently – Richard Onslow Roper Nov 06 '21 at 20:48
You should be able to scroll to the default upon composition. What do you want next? – Richard Onslow Roper Nov 06 '21 at 20:49
You can log [here](https://chat.stackoverflow.com/rooms/238943/discussion-between-loloof64-and-marsk) – Richard Onslow Roper Nov 06 '21 at 20:49

loloof64 · Accepted Answer · 2021-11-07T15:58:44.697

Here how I manage to solve (partially) my issue :

use a plain ScrollState instead of rememberScrollState() : because even if I set scroll to a fixed value at recomposition, the user still will be able to move it. So, no need to "cache" the scroll value
use sp to px conversion for the scroll amount which is expected a value in pixels, and an hard-coded division amount of the given index (that's why it is only partially solved)

Which led me to the following :

sealed class MovesNavigatorElement(open val text: String)
data class MoveNumber(override val text: String) : MovesNavigatorElement(text)
data class HalfMoveSAN(override val text: String) : MovesNavigatorElement(text)

@Composable
fun MovesNavigator(modifier: Modifier = Modifier, elements: Array<MovesNavigatorElement>, mustBeVisibleByDefaultElementIndex: Int = 0) {
    val lineHeightPixels = with(LocalDensity.current) {34.sp.toPx()}
    val scrollAmount = ((mustBeVisibleByDefaultElementIndex / 6) * lineHeightPixels).toInt()
    val vertScrollState = ScrollState(scrollAmount)

    FlowRow(
        modifier = modifier
            .background(color = Color.Yellow.copy(alpha = 0.3f))
            .verticalScroll(vertScrollState),
        mainAxisSpacing = 8.dp,
    ) {
        elements.map {
            Text(text = it.text, fontSize = 34.sp, color = Color.Blue, style= MaterialTheme.typography.body1)
        }
    }
}

But still have to test on several devices.

Accompanist FlowRow : is it possible to scroll down automatically in order to show an element?

2 Answers2