The current api exposes multiple ways for alignment to be expressed:
Container::center_x is equivalent to Container::align_x(Center)HorizonalAlignment, VerticalAlignement, and Align all express the same concept.These introduce more names and relationships for users to learn about in the api, and I think reducing them would be positive. could we remove them?
Yes, I believe these methods need to be redesigned and unified somehow. Some thoughts:
Container is a very vague name for a widget.Container::center_x doesn't really express the intent that it will align the contents instead of the Container itself.HorizontalAlignment and VerticalAlignment are very long names that are hard to type and read. We could abbreviate them, but that would be working around the issue. I'd prefer to find better, more intuitive names. Should we simply use Align instead?Overall, I think layouting needs some rethinking in general.
HorizonalAlignment and VerticalAlignment are only used by the Text::*__alignment functions, which don't seem to have any point of comparison. None of the other "end-nodes" have an idea of internal alignment (you'd need a Row, Column, or Container).
I'd like to consider separating alignment from any of the visual widgets, and relegating it to the layout widgets only. This would mean align_ functions could always refer to the contents of the widget, and hopefully make things more predictable.
I think this shouldn't be too hard with Text - the rendered string will have a fixed size that can be handled by layout.
On the other hand, I'm not sure how Image should be handled in this scenario. It's not even clear how it should behave with different sizes today (I tried Length::Fill in the pokedex example, and the image disappeared?), and we'll want to support things like Scaling::{Fill, Fit} down the line
You can look at the flutter.
How about this type:
pub struct Alignment(pub f32, pub f32); // (x, y)
impl Alignment {
const TOP_LEFT: Self = Self(-1.0, -1.0);
const TOP_CENTER: Self = Self(-1.0, 0.0);
const TOP_RIGHT: Self = Self(-1.0, 1.0);
const CENTER_LEFT: Self = Self(0.0, -1.0);
const CENTER: Self = Self(0.0, 0.0);
const CENTER_RIGHT: Self = Self(0.0, 1.0);
const BOTTOM_LEFT: Self = Self(1.0, -1.0);
const BOTTOM_CENTER: Self = Self(1.0, 0.0);
const BOTTOM_RIGHT: Self = Self(1.0, 1.0);
// ....
}
// Possible usage:
let element = Container::new(inner).align(Alignment::CENTER_LEFT);
let element = Container::align(Alignment::CENTER_LEFT, inner);
// You can add a special widget for alignment only:
let element = Align::new(Alignment::CENTER_LEFT, inner);
I like the idea of just using Align for everything. For things that have a natural axis Align works fine and you should always have the extra information about which axis the alignment is relative to.
Flutter has some good insights, some bloody confusing stuff as well though.
It has things like CrossAxisAlignment which just seem unnecessary.