Rikulo Blog Building a List View Demo using Rikulo

IntroductionAs we are building up the UI infrastructure of Rikulo, there is a critical widget we can't miss: List View. On our skretch paper, the rough architecture is like this:Before we rush to create a List View widget, we would like to simulate its left part as an application of ScrollView first. Also this gives us a chance to test the strength of the Scroller utility.The OutcomeTo scroll down the list drag with mouse or swipe with finger.Starting with ScrollViewWe start with putting down a ScrollView widget at the center of mainView.ScrollView view = new ScrollView(direction: Dir.VERTICAL); view.profile.text = "location: center center; width: 80%; height: 80%"; view.classes.add("list-view"); mainView.addChild(view); Loading List ItemsThen, we are going to fill up the list items in ScrollView. Note that if we don't give ScrollView a content height, it will adjust automatically depending on the size and position of its children.for (int x = 0; x < 50; ++x) { View child = new TextView("Row ${x + 1}"); final int height = 50; child.classes.add("list-item"); child.style.cssText = "line-height: ${height}px"; child.style.userSelect = "none"; // so it does not interrupt dragging child.profile.width = "flex"; // take full width child.top = x * height; child.height = height; view.addChild(child); } Snap FunctionStepping further, we can add a snap function, which tells the ScrollView to "snap to" a position based on the ending position of a scrolling. In the implementation below, we let it snap to closest border of each list item.ScrollView view; view = new ScrollView(direction: Dir.VERTICAL, snap: (Offset off) { final num vlimit = 50 * 50 - view.innerHeight; final num y = off.y >= vlimit ? vlimit : ((off.y + 25) / 50).floor() * 50; return new Offset(off.x, y); }); ConclusionBased on the nature of ScrollView, such a List View example is really easy to achieve.In our next blog post, we are going to explore creating another example using ScrollView: a 2D scrolling panel with its scrolling linked to side bars. Please don't hesitate to leave your comment.