Modified the "scroll.rs" example to use the new spawning API. (#19592)
# Objective - Update the scroll example to use the latest API. ## Solution - It now uses the 'children![]' API. ## Testing - I manually verified that the scrolling was working ## Limitations - Unfortunately, I couldn't find a way to spawn observers targeting the entity inside the "fn() -> impl Bundle" function.
This commit is contained in:
LP
GitHub
parent
0d620cdf29
commit
8ab71a6999
@ -3,6 +3,7 @@
|
|||||||
use accesskit::{Node as Accessible, Role};
|
use accesskit::{Node as Accessible, Role};
|
||||||
use bevy::{
|
use bevy::{
|
||||||
a11y::AccessibilityNode,
|
a11y::AccessibilityNode,
|
||||||
|
ecs::spawn::SpawnIter,
|
||||||
input::mouse::{MouseScrollUnit, MouseWheel},
|
input::mouse::{MouseScrollUnit, MouseWheel},
|
||||||
picking::hover::HoverMap,
|
picking::hover::HoverMap,
|
||||||
prelude::*,
|
prelude::*,
|
||||||
@ -26,6 +27,9 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
|
|||||||
// Camera
|
// Camera
|
||||||
commands.spawn((Camera2d, IsDefaultUiCamera));
|
commands.spawn((Camera2d, IsDefaultUiCamera));
|
||||||
|
|
||||||
|
// Font
|
||||||
|
let font_handle = asset_server.load("fonts/FiraSans-Bold.ttf");
|
||||||
|
|
||||||
// root node
|
// root node
|
||||||
commands
|
commands
|
||||||
.spawn(Node {
|
.spawn(Node {
|
||||||
@ -49,7 +53,7 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
|
|||||||
parent.spawn((
|
parent.spawn((
|
||||||
Text::new("Horizontally Scrolling list (Ctrl + MouseWheel)"),
|
Text::new("Horizontally Scrolling list (Ctrl + MouseWheel)"),
|
||||||
TextFont {
|
TextFont {
|
||||||
font: asset_server.load("fonts/FiraSans-Bold.ttf"),
|
font: font_handle.clone(),
|
||||||
font_size: FONT_SIZE,
|
font_size: FONT_SIZE,
|
||||||
..default()
|
..default()
|
||||||
},
|
},
|
||||||
@ -71,260 +75,243 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
|
|||||||
.with_children(|parent| {
|
.with_children(|parent| {
|
||||||
for i in 0..100 {
|
for i in 0..100 {
|
||||||
parent.spawn((Text(format!("Item {i}")),
|
parent.spawn((Text(format!("Item {i}")),
|
||||||
TextFont {
|
TextFont {
|
||||||
font: asset_server
|
font: font_handle.clone(),
|
||||||
.load("fonts/FiraSans-Bold.ttf"),
|
..default()
|
||||||
..default()
|
},
|
||||||
},
|
Label,
|
||||||
Label,
|
AccessibilityNode(Accessible::new(Role::ListItem)),
|
||||||
AccessibilityNode(Accessible::new(Role::ListItem)),
|
|
||||||
))
|
))
|
||||||
.insert(Node {
|
.insert(Node {
|
||||||
min_width: Val::Px(200.),
|
min_width: Val::Px(200.),
|
||||||
align_content: AlignContent::Center,
|
align_content: AlignContent::Center,
|
||||||
..default()
|
..default()
|
||||||
})
|
})
|
||||||
.insert(Pickable {
|
.insert(Pickable {
|
||||||
should_block_lower: false,
|
should_block_lower: false,
|
||||||
..default()
|
..default()
|
||||||
})
|
})
|
||||||
.observe(|
|
.observe(|
|
||||||
trigger: Trigger<Pointer<Press>>,
|
trigger: Trigger<Pointer<Press>>,
|
||||||
mut commands: Commands
|
mut commands: Commands
|
||||||
| {
|
| {
|
||||||
if trigger.event().button == PointerButton::Primary {
|
if trigger.event().button == PointerButton::Primary {
|
||||||
commands.entity(trigger.target().unwrap()).despawn();
|
commands.entity(trigger.target().unwrap()).despawn();
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
// container for all other examples
|
// container for all other examples
|
||||||
parent
|
parent.spawn((
|
||||||
.spawn(Node {
|
Node {
|
||||||
width: Val::Percent(100.),
|
width: Val::Percent(100.),
|
||||||
height: Val::Percent(100.),
|
height: Val::Percent(100.),
|
||||||
flex_direction: FlexDirection::Row,
|
flex_direction: FlexDirection::Row,
|
||||||
justify_content: JustifyContent::SpaceBetween,
|
justify_content: JustifyContent::SpaceBetween,
|
||||||
..default()
|
..default()
|
||||||
})
|
},
|
||||||
.with_children(|parent| {
|
children![
|
||||||
// vertical scroll example
|
vertically_scrolling_list(asset_server.load("fonts/FiraSans-Bold.ttf")),
|
||||||
parent
|
bidirectional_scrolling_list(asset_server.load("fonts/FiraSans-Bold.ttf")),
|
||||||
.spawn(Node {
|
nested_scrolling_list(asset_server.load("fonts/FiraSans-Bold.ttf")),
|
||||||
flex_direction: FlexDirection::Column,
|
],
|
||||||
justify_content: JustifyContent::Center,
|
));
|
||||||
align_items: AlignItems::Center,
|
|
||||||
width: Val::Px(200.),
|
|
||||||
..default()
|
|
||||||
})
|
|
||||||
.with_children(|parent| {
|
|
||||||
// Title
|
|
||||||
parent.spawn((
|
|
||||||
Text::new("Vertically Scrolling List"),
|
|
||||||
TextFont {
|
|
||||||
font: asset_server.load("fonts/FiraSans-Bold.ttf"),
|
|
||||||
font_size: FONT_SIZE,
|
|
||||||
..default()
|
|
||||||
},
|
|
||||||
Label,
|
|
||||||
));
|
|
||||||
// Scrolling list
|
|
||||||
parent
|
|
||||||
.spawn((
|
|
||||||
Node {
|
|
||||||
flex_direction: FlexDirection::Column,
|
|
||||||
align_self: AlignSelf::Stretch,
|
|
||||||
height: Val::Percent(50.),
|
|
||||||
overflow: Overflow::scroll_y(), // n.b.
|
|
||||||
..default()
|
|
||||||
},
|
|
||||||
BackgroundColor(Color::srgb(0.10, 0.10, 0.10)),
|
|
||||||
))
|
|
||||||
.with_children(|parent| {
|
|
||||||
// List items
|
|
||||||
for i in 0..25 {
|
|
||||||
parent
|
|
||||||
.spawn(Node {
|
|
||||||
min_height: Val::Px(LINE_HEIGHT),
|
|
||||||
max_height: Val::Px(LINE_HEIGHT),
|
|
||||||
..default()
|
|
||||||
})
|
|
||||||
.insert(Pickable {
|
|
||||||
should_block_lower: false,
|
|
||||||
..default()
|
|
||||||
})
|
|
||||||
.with_children(|parent| {
|
|
||||||
parent
|
|
||||||
.spawn((
|
|
||||||
Text(format!("Item {i}")),
|
|
||||||
TextFont {
|
|
||||||
font: asset_server
|
|
||||||
.load("fonts/FiraSans-Bold.ttf"),
|
|
||||||
..default()
|
|
||||||
},
|
|
||||||
Label,
|
|
||||||
AccessibilityNode(Accessible::new(
|
|
||||||
Role::ListItem,
|
|
||||||
)),
|
|
||||||
))
|
|
||||||
.insert(Pickable {
|
|
||||||
should_block_lower: false,
|
|
||||||
..default()
|
|
||||||
});
|
|
||||||
});
|
|
||||||
}
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
// Bidirectional scroll example
|
|
||||||
parent
|
|
||||||
.spawn(Node {
|
|
||||||
flex_direction: FlexDirection::Column,
|
|
||||||
justify_content: JustifyContent::Center,
|
|
||||||
align_items: AlignItems::Center,
|
|
||||||
width: Val::Px(200.),
|
|
||||||
..default()
|
|
||||||
})
|
|
||||||
.with_children(|parent| {
|
|
||||||
// Title
|
|
||||||
parent.spawn((
|
|
||||||
Text::new("Bidirectionally Scrolling List"),
|
|
||||||
TextFont {
|
|
||||||
font: asset_server.load("fonts/FiraSans-Bold.ttf"),
|
|
||||||
font_size: FONT_SIZE,
|
|
||||||
..default()
|
|
||||||
},
|
|
||||||
Label,
|
|
||||||
));
|
|
||||||
// Scrolling list
|
|
||||||
parent
|
|
||||||
.spawn((
|
|
||||||
Node {
|
|
||||||
flex_direction: FlexDirection::Column,
|
|
||||||
align_self: AlignSelf::Stretch,
|
|
||||||
height: Val::Percent(50.),
|
|
||||||
overflow: Overflow::scroll(), // n.b.
|
|
||||||
..default()
|
|
||||||
},
|
|
||||||
BackgroundColor(Color::srgb(0.10, 0.10, 0.10)),
|
|
||||||
))
|
|
||||||
.with_children(|parent| {
|
|
||||||
// Rows in each column
|
|
||||||
for oi in 0..10 {
|
|
||||||
parent
|
|
||||||
.spawn(Node {
|
|
||||||
flex_direction: FlexDirection::Row,
|
|
||||||
..default()
|
|
||||||
})
|
|
||||||
.insert(Pickable::IGNORE)
|
|
||||||
.with_children(|parent| {
|
|
||||||
// Elements in each row
|
|
||||||
for i in 0..25 {
|
|
||||||
parent
|
|
||||||
.spawn((
|
|
||||||
Text(format!("Item {}", (oi * 25) + i)),
|
|
||||||
TextFont {
|
|
||||||
font: asset_server.load(
|
|
||||||
"fonts/FiraSans-Bold.ttf",
|
|
||||||
),
|
|
||||||
..default()
|
|
||||||
},
|
|
||||||
Label,
|
|
||||||
AccessibilityNode(Accessible::new(
|
|
||||||
Role::ListItem,
|
|
||||||
)),
|
|
||||||
))
|
|
||||||
.insert(Pickable {
|
|
||||||
should_block_lower: false,
|
|
||||||
..default()
|
|
||||||
});
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
// Nested scrolls example
|
|
||||||
parent
|
|
||||||
.spawn(Node {
|
|
||||||
flex_direction: FlexDirection::Column,
|
|
||||||
justify_content: JustifyContent::Center,
|
|
||||||
align_items: AlignItems::Center,
|
|
||||||
width: Val::Px(200.),
|
|
||||||
..default()
|
|
||||||
})
|
|
||||||
.with_children(|parent| {
|
|
||||||
// Title
|
|
||||||
parent.spawn((
|
|
||||||
Text::new("Nested Scrolling Lists"),
|
|
||||||
TextFont {
|
|
||||||
font: asset_server.load("fonts/FiraSans-Bold.ttf"),
|
|
||||||
font_size: FONT_SIZE,
|
|
||||||
..default()
|
|
||||||
},
|
|
||||||
Label,
|
|
||||||
));
|
|
||||||
// Outer, horizontal scrolling container
|
|
||||||
parent
|
|
||||||
.spawn((
|
|
||||||
Node {
|
|
||||||
column_gap: Val::Px(20.),
|
|
||||||
flex_direction: FlexDirection::Row,
|
|
||||||
align_self: AlignSelf::Stretch,
|
|
||||||
height: Val::Percent(50.),
|
|
||||||
overflow: Overflow::scroll_x(), // n.b.
|
|
||||||
..default()
|
|
||||||
},
|
|
||||||
BackgroundColor(Color::srgb(0.10, 0.10, 0.10)),
|
|
||||||
))
|
|
||||||
.with_children(|parent| {
|
|
||||||
// Inner, scrolling columns
|
|
||||||
for oi in 0..30 {
|
|
||||||
parent
|
|
||||||
.spawn((
|
|
||||||
Node {
|
|
||||||
flex_direction: FlexDirection::Column,
|
|
||||||
align_self: AlignSelf::Stretch,
|
|
||||||
overflow: Overflow::scroll_y(),
|
|
||||||
..default()
|
|
||||||
},
|
|
||||||
BackgroundColor(Color::srgb(0.05, 0.05, 0.05)),
|
|
||||||
))
|
|
||||||
.insert(Pickable {
|
|
||||||
should_block_lower: false,
|
|
||||||
..default()
|
|
||||||
})
|
|
||||||
.with_children(|parent| {
|
|
||||||
for i in 0..25 {
|
|
||||||
parent
|
|
||||||
.spawn((
|
|
||||||
Text(format!("Item {}", (oi * 25) + i)),
|
|
||||||
TextFont {
|
|
||||||
font: asset_server.load(
|
|
||||||
"fonts/FiraSans-Bold.ttf",
|
|
||||||
),
|
|
||||||
..default()
|
|
||||||
},
|
|
||||||
Label,
|
|
||||||
AccessibilityNode(Accessible::new(
|
|
||||||
Role::ListItem,
|
|
||||||
)),
|
|
||||||
))
|
|
||||||
.insert(Pickable {
|
|
||||||
should_block_lower: false,
|
|
||||||
..default()
|
|
||||||
});
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
});
|
|
||||||
});
|
|
||||||
});
|
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
fn vertically_scrolling_list(font_handle: Handle<Font>) -> impl Bundle {
|
||||||
|
(
|
||||||
|
Node {
|
||||||
|
flex_direction: FlexDirection::Column,
|
||||||
|
justify_content: JustifyContent::Center,
|
||||||
|
align_items: AlignItems::Center,
|
||||||
|
width: Val::Px(200.),
|
||||||
|
..default()
|
||||||
|
},
|
||||||
|
children![
|
||||||
|
(
|
||||||
|
// Title
|
||||||
|
Text::new("Vertically Scrolling List"),
|
||||||
|
TextFont {
|
||||||
|
font: font_handle.clone(),
|
||||||
|
font_size: FONT_SIZE,
|
||||||
|
..default()
|
||||||
|
},
|
||||||
|
Label,
|
||||||
|
),
|
||||||
|
(
|
||||||
|
// Scrolling list
|
||||||
|
Node {
|
||||||
|
flex_direction: FlexDirection::Column,
|
||||||
|
align_self: AlignSelf::Stretch,
|
||||||
|
height: Val::Percent(50.),
|
||||||
|
overflow: Overflow::scroll_y(), // n.b.
|
||||||
|
..default()
|
||||||
|
},
|
||||||
|
BackgroundColor(Color::srgb(0.10, 0.10, 0.10)),
|
||||||
|
Children::spawn(SpawnIter((0..25).map(move |i| {
|
||||||
|
(
|
||||||
|
Node {
|
||||||
|
min_height: Val::Px(LINE_HEIGHT),
|
||||||
|
max_height: Val::Px(LINE_HEIGHT),
|
||||||
|
..default()
|
||||||
|
},
|
||||||
|
Pickable {
|
||||||
|
should_block_lower: false,
|
||||||
|
..default()
|
||||||
|
},
|
||||||
|
children![(
|
||||||
|
Text(format!("Item {i}")),
|
||||||
|
TextFont {
|
||||||
|
font: font_handle.clone(),
|
||||||
|
..default()
|
||||||
|
},
|
||||||
|
Label,
|
||||||
|
AccessibilityNode(Accessible::new(Role::ListItem)),
|
||||||
|
Pickable {
|
||||||
|
should_block_lower: false,
|
||||||
|
..default()
|
||||||
|
}
|
||||||
|
)],
|
||||||
|
)
|
||||||
|
})))
|
||||||
|
),
|
||||||
|
],
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
fn bidirectional_scrolling_list(font_handle: Handle<Font>) -> impl Bundle {
|
||||||
|
(
|
||||||
|
Node {
|
||||||
|
flex_direction: FlexDirection::Column,
|
||||||
|
justify_content: JustifyContent::Center,
|
||||||
|
align_items: AlignItems::Center,
|
||||||
|
width: Val::Px(200.),
|
||||||
|
..default()
|
||||||
|
},
|
||||||
|
children![
|
||||||
|
(
|
||||||
|
Text::new("Bidirectionally Scrolling List"),
|
||||||
|
TextFont {
|
||||||
|
font: font_handle.clone(),
|
||||||
|
font_size: FONT_SIZE,
|
||||||
|
..default()
|
||||||
|
},
|
||||||
|
Label,
|
||||||
|
),
|
||||||
|
(
|
||||||
|
Node {
|
||||||
|
flex_direction: FlexDirection::Column,
|
||||||
|
align_self: AlignSelf::Stretch,
|
||||||
|
height: Val::Percent(50.),
|
||||||
|
overflow: Overflow::scroll(), // n.b.
|
||||||
|
..default()
|
||||||
|
},
|
||||||
|
BackgroundColor(Color::srgb(0.10, 0.10, 0.10)),
|
||||||
|
Children::spawn(SpawnIter((0..25).map(move |oi| {
|
||||||
|
(
|
||||||
|
Node {
|
||||||
|
flex_direction: FlexDirection::Row,
|
||||||
|
..default()
|
||||||
|
},
|
||||||
|
Pickable::IGNORE,
|
||||||
|
Children::spawn(SpawnIter((0..10).map({
|
||||||
|
let value = font_handle.clone();
|
||||||
|
move |i| {
|
||||||
|
(
|
||||||
|
Text(format!("Item {}", (oi * 10) + i)),
|
||||||
|
TextFont {
|
||||||
|
font: value.clone(),
|
||||||
|
..default()
|
||||||
|
},
|
||||||
|
Label,
|
||||||
|
AccessibilityNode(Accessible::new(Role::ListItem)),
|
||||||
|
Pickable {
|
||||||
|
should_block_lower: false,
|
||||||
|
..default()
|
||||||
|
},
|
||||||
|
)
|
||||||
|
}
|
||||||
|
}))),
|
||||||
|
)
|
||||||
|
})))
|
||||||
|
)
|
||||||
|
],
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
fn nested_scrolling_list(font_handle: Handle<Font>) -> impl Bundle {
|
||||||
|
(
|
||||||
|
Node {
|
||||||
|
flex_direction: FlexDirection::Column,
|
||||||
|
justify_content: JustifyContent::Center,
|
||||||
|
align_items: AlignItems::Center,
|
||||||
|
width: Val::Px(200.),
|
||||||
|
..default()
|
||||||
|
},
|
||||||
|
children![
|
||||||
|
(
|
||||||
|
// Title
|
||||||
|
Text::new("Nested Scrolling Lists"),
|
||||||
|
TextFont {
|
||||||
|
font: font_handle.clone(),
|
||||||
|
font_size: FONT_SIZE,
|
||||||
|
..default()
|
||||||
|
},
|
||||||
|
Label,
|
||||||
|
),
|
||||||
|
(
|
||||||
|
// Outer, horizontal scrolling container
|
||||||
|
Node {
|
||||||
|
column_gap: Val::Px(20.),
|
||||||
|
flex_direction: FlexDirection::Row,
|
||||||
|
align_self: AlignSelf::Stretch,
|
||||||
|
height: Val::Percent(50.),
|
||||||
|
overflow: Overflow::scroll_x(), // n.b.
|
||||||
|
..default()
|
||||||
|
},
|
||||||
|
BackgroundColor(Color::srgb(0.10, 0.10, 0.10)),
|
||||||
|
// Inner, scrolling columns
|
||||||
|
Children::spawn(SpawnIter((0..30).map(move |oi| {
|
||||||
|
(
|
||||||
|
Node {
|
||||||
|
flex_direction: FlexDirection::Column,
|
||||||
|
align_self: AlignSelf::Stretch,
|
||||||
|
overflow: Overflow::scroll_y(),
|
||||||
|
..default()
|
||||||
|
},
|
||||||
|
BackgroundColor(Color::srgb(0.05, 0.05, 0.05)),
|
||||||
|
Pickable {
|
||||||
|
should_block_lower: false,
|
||||||
|
..default()
|
||||||
|
},
|
||||||
|
Children::spawn(SpawnIter((0..30).map({
|
||||||
|
let value = font_handle.clone();
|
||||||
|
move |i| {
|
||||||
|
(
|
||||||
|
Text(format!("Item {}", (oi * 25) + i)),
|
||||||
|
TextFont {
|
||||||
|
font: value.clone(),
|
||||||
|
..default()
|
||||||
|
},
|
||||||
|
Label,
|
||||||
|
AccessibilityNode(Accessible::new(Role::ListItem)),
|
||||||
|
Pickable {
|
||||||
|
should_block_lower: false,
|
||||||
|
..default()
|
||||||
|
},
|
||||||
|
)
|
||||||
|
}
|
||||||
|
}))),
|
||||||
|
)
|
||||||
|
})))
|
||||||
|
)
|
||||||
|
],
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
/// Updates the scroll position of scrollable nodes in response to mouse input
|
/// Updates the scroll position of scrollable nodes in response to mouse input
|
||||||
pub fn update_scroll_position(
|
pub fn update_scroll_position(
|
||||||
mut mouse_wheel_events: EventReader<MouseWheel>,
|
mut mouse_wheel_events: EventReader<MouseWheel>,
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user