Mirrors/bevy
2
0
Fork 0
mirror of https://github.com/bevyengine/bevy synced 2024-11-22 12:43:34 +00:00
Code Issues Projects Releases Packages Wiki Activity

Remove custom window size from flex_layout example (#11876)

Browse source 
# Objective

The example showcase doesn't seem to work well with the portrait aspect
ratio used in this example, which is possibly something to be fixed
there, but there's also no reason this *needs* a custom size.

This custom window size is also sightly too tall for my particular
display which is a very common display size when accounting for the
macOS task bar and window title, so the content at the bottom is
clipped.

## Solution

- Remove the custom window size
- Swap the order of the justify / align nested loops so that the content
fits the new aspect ratio
- Make the containers responsive to window size, and make all the gaps
even

## Before

<img width="870" alt="Screenshot 2024-02-15 at 10 56 11 AM"
src="https://github.com/bevyengine/bevy/assets/200550/803217dd-e311-4f9e-aabf-2656f7f67615">

## After

<img width="1280" alt="Screenshot 2024-02-15 at 10 56 25 AM"
src="https://github.com/bevyengine/bevy/assets/200550/bf1e4920-f053-4d42-ab0b-3efea6835cae">

Co-authored-by: Alice Cecile <alice.i.cecile@gmail.com>
This commit is contained in:
Rob Parrett 2024-02-26 09:04:02 -07:00 committed by GitHub
parent fa179ba475
commit 5d941d5b91
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
1 changed files with 14 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

24
examples/ui/flex_layout.rs
View file

@ -3,13 +3,12 @@ use bevy::prelude::*;
const ALIGN_ITEMS_COLOR: LegacyColor = LegacyColor::rgb(1., 0.066, 0.349);
const JUSTIFY_CONTENT_COLOR: LegacyColor = LegacyColor::rgb(0.102, 0.522, 1.);
const MARGIN: Val = Val::Px(5.);
const MARGIN: Val = Val::Px(12.);
fn main() {
App::new()
.add_plugins(DefaultPlugins.set(WindowPlugin {
primary_window: Some(Window {
resolution: [870., 1066.].into(),
title: "Bevy Flex Layout Example".to_string(),
..Default::default()
}),
@ -27,8 +26,11 @@ fn spawn_layout(mut commands: Commands, asset_server: Res<AssetServer>) {
style: Style {
// fill the entire window
width: Val::Percent(100.),
height: Val::Percent(100.),
flex_direction: FlexDirection::Column,
align_items: AlignItems::Center,
padding: UiRect::all(MARGIN),
row_gap: MARGIN,
..Default::default()
},
background_color: BackgroundColor(LegacyColor::BLACK),
@ -40,7 +42,6 @@ fn spawn_layout(mut commands: Commands, asset_server: Res<AssetServer>) {
.spawn(NodeBundle {
style: Style {
flex_direction: FlexDirection::Row,
margin: UiRect::top(MARGIN),
..Default::default()
},
..Default::default()
@ -65,9 +66,10 @@ fn spawn_layout(mut commands: Commands, asset_server: Res<AssetServer>) {
builder
.spawn(NodeBundle {
style: Style {
width: Val::Px(850.),
height: Val::Px(1020.),
width: Val::Percent(100.),
height: Val::Percent(100.),
flex_direction: FlexDirection::Column,
row_gap: MARGIN,
..Default::default()
},
..Default::default()
@ -89,17 +91,20 @@ fn spawn_layout(mut commands: Commands, asset_server: Res<AssetServer>) {
AlignItems::FlexEnd,
AlignItems::Stretch,
];
for justify_content in justifications {
for align_items in alignments {
builder
.spawn(NodeBundle {
style: Style {
width: Val::Percent(100.),
height: Val::Percent(100.),
flex_direction: FlexDirection::Row,
column_gap: MARGIN,
..Default::default()
},
..Default::default()
})
.with_children(|builder| {
for align_items in alignments {
for justify_content in justifications {
spawn_child_node(
builder,
font.clone(),
@ -125,9 +130,8 @@ fn spawn_child_node(
flex_direction: FlexDirection::Column,
align_items,
justify_content,
width: Val::Px(160.),
height: Val::Px(160.),
margin: UiRect::all(MARGIN),
width: Val::Percent(100.),
height: Val::Percent(100.),
..Default::default()
},
background_color: BackgroundColor(LegacyColor::DARK_GRAY),