How to draw a square grid with buttons?

[sharshith]

As the examples said, I tried doing like this:

//iterator
.fold(commands.spawn(), |mut entity, ((x, y), e)| {
            println!("{} {}", x, y);
            entity.insert(ButtonBundle {
                interaction: if e { Interaction::Clicked } else { Interaction::None },
                style: Style {
                    size: Size::new(Val::Px(1.0), Val::Px(10.0)),
                    // center button
                    margin: Rect::all(Val::Auto),
                    ..Default::default()
                },
                material: materials.add(if e { Color::ANTIQUE_WHITE } else { Color::AQUAMARINE }.into()),
                transform: Transform {
                    translation: Vec3::new((x * 10) as f32 -300., (y * 10) as f32 -300.0, 0.),
                    ..Default::default()
                },
                ..Default::default()
            });
            entity
        });

where x is usize, y is usize and e is bool.
But, the buttons are not displaying at all.

[alice-i-cecile]

Following the standard troubleshooting steps: did you remember to spawn a UI camera as well? :)

[sharshith]

Thanks for the reply😃️. Sorry, for the late reply. I kinda gave up midway and started doing other stuff. After that I carefully looked at the UI button example and was able to extend to multiple buttons and finally I was able to render multiple buttons using the iterator.
Here is my code to display it.

commands.spawn_bundle(NodeBundle {
        style: Style {
            display: Display::Flex,
            flex_wrap: FlexWrap::Wrap,
            justify_content: JustifyContent::Center,
            align_content: AlignContent::Center,
            ..Default::default()
        },
        ..Default::default()
    }).with_children(|parent| {
        buffer.iter().enumerate()
            .fold(parent, |parent, (i, _)| {
                let entity = parent.spawn_bundle(ButtonBundle {
                    style: Style {
                        size: Size::new(Val::Px(100.0), Val::Px(100.0)),
                        ..Default::default()
                    },
                    material: button_materials.normal.clone(),
                    ..Default::default()
                }).id();
                parent
            });

However, the I got one one issue left:
Is this correct(or performant) way to add buttons?(because the number of buttons is more than 100).

[alice-i-cecile]

Almost! spawn_batch will be slightly faster due to memory preallocation (although actually I'm not sure if adding children works with it due to the way it doesn't immediately return an entity reference).

Regardless, I wouldn't worry too much about the performance of a one time operation while prototyping; the exact details are likely to change as we develop the engine to improve the maturity of the UI.