Add scrolling progress indicators to `scrollable` example

This commit is contained in:
Héctor Ramón 2021-06-04 20:46:47 +07:00
parent 3051d4ec76
commit ce3a5f19b9
1 changed files with 32 additions and 4 deletions

View File

@ -1,8 +1,8 @@
mod style;
use iced::{
button, scrollable, Button, Column, Container, Element, Length, Radio, Row,
Rule, Sandbox, Scrollable, Settings, Space, Text,
button, scrollable, Button, Column, Container, Element, Length,
ProgressBar, Radio, Row, Rule, Sandbox, Scrollable, Settings, Space, Text,
};
pub fn main() -> iced::Result {
@ -19,6 +19,7 @@ enum Message {
ThemeChanged(style::Theme),
ScrollToTop(usize),
ScrollToBottom(usize),
Scrolled(usize, f32),
}
impl Sandbox for ScrollableDemo {
@ -41,11 +42,20 @@ impl Sandbox for ScrollableDemo {
Message::ScrollToTop(i) => {
if let Some(variant) = self.variants.get_mut(i) {
variant.scrollable.snap_to(0.0);
variant.latest_offset = 0.0;
}
}
Message::ScrollToBottom(i) => {
if let Some(variant) = self.variants.get_mut(i) {
variant.scrollable.snap_to(1.0);
variant.latest_offset = 1.0;
}
}
Message::Scrolled(i, offset) => {
if let Some(variant) = self.variants.get_mut(i) {
variant.latest_offset = offset;
}
}
}
@ -82,6 +92,9 @@ impl Sandbox for ScrollableDemo {
.spacing(10)
.width(Length::Fill)
.height(Length::Fill)
.on_scroll(move |offset| {
Message::Scrolled(i, offset)
})
.style(*theme)
.push(Text::new(variant.title))
.push(
@ -143,10 +156,20 @@ impl Sandbox for ScrollableDemo {
.on_press(Message::ScrollToTop(i)),
);
Container::new(scrollable)
Column::new()
.width(Length::Fill)
.height(Length::Fill)
.style(*theme)
.spacing(10)
.push(
Container::new(scrollable)
.width(Length::Fill)
.height(Length::Fill)
.style(*theme),
)
.push(ProgressBar::new(
0.0..=1.0,
variant.latest_offset,
))
.into()
})
.collect(),
@ -181,6 +204,7 @@ struct Variant {
scrollbar_width: Option<u16>,
scrollbar_margin: Option<u16>,
scroller_width: Option<u16>,
latest_offset: f32,
}
impl Variant {
@ -194,6 +218,7 @@ impl Variant {
scrollbar_width: None,
scrollbar_margin: None,
scroller_width: None,
latest_offset: 0.0,
},
Self {
title: "Slimmed & Margin",
@ -203,6 +228,7 @@ impl Variant {
scrollbar_width: Some(4),
scrollbar_margin: Some(3),
scroller_width: Some(4),
latest_offset: 0.0,
},
Self {
title: "Wide Scroller",
@ -212,6 +238,7 @@ impl Variant {
scrollbar_width: Some(4),
scrollbar_margin: None,
scroller_width: Some(10),
latest_offset: 0.0,
},
Self {
title: "Narrow Scroller",
@ -221,6 +248,7 @@ impl Variant {
scrollbar_width: Some(10),
scrollbar_margin: None,
scroller_width: Some(4),
latest_offset: 0.0,
},
]
}