Use add_child API in Bevy's examples instead of with_children

[Dimchikkk]

What problem does this solve or what need does it fill?

Encourages flat UI code structure instead of deep nesting.

What solution would you like?

Use add_child instead of with_children API, something like:

let root = commands.spawn(NodeBundle::default()).id();
let child = commands.spawn(NodeBundle::default()).id()
commands.entity(root).add_child(child);

What alternative(s) have you considered?

Additional context

[alice-i-cecile]

Similar style discussions were previously had in #3855.

I personally prefer this style, but it's not for everyone.

[Dimchikkk]

Similar style discussions were previously had in #3855.

I personally prefer this style, but it's not for everyone.

I've just noticed by following the #ui channel for half a year or more that quite a few people disliked bevy-ui because they didn't know about the add_child API and used with_children all the time. If Bevy's examples use add_child, it would encourage newcomers to write a flat UI code structure and not hate bevy-ui for deep nesting :)

[tbillington]

I quite like the nesting coming from html/css/react world, it's just the verbosity in number of lines that is the killer for me.

<div id="shoot-lasers" class="flex-col justify-center items-center w-24 h-24">
  <button id="shoot-lasers-button" class="font-serif text-2xl text-red-500 text-center">
    Shoot lasers
  </button>
</div>

p.spawn((
    Name::new("shoot-lasers"),
    ButtonBundle {
        style: Style {
            flex_direction: FlexDirection::Column,
            justify_content: JustifyContent::Center,
            align_items: AlignItems::Center,
            width: Val::Px(256.),
            height: Val::Px(256.),
            ..default()
        },
        ..default()
    },
))
.with_children(|p| {
    p.spawn((
        Name::new("shoot-lasers-button"),
        TextBundle::from_section(
            c.render(),
            TextStyle {
                font: asset_server.load("Silver.ttf"),
                font_size: 40.,
                color: Color::RED,
            },
        )
        .with_text_alignment(TextAlignment::Center),
    ));
});

[mockersf]

In my opinion, nesting is a lot preferable for UI than flat.

Examples could showcase both patterns, by migrating only a few, with an explanation on top.

[ickshonpe]

The "display_and_visibility" example I wrote is by far the worst offender. The code that spawns the left and right panels is all nesting and duplication. It could really do with a rework, maybe using a for loop and add_child to construct the sections.