Fixed tabs

Cargo.toml

@@ -48,7 +48,7 @@ default = [
  "grid",
  "modal",
  "tab_bar",
- #"tabs",
+ "tabs",
  #"time_picker",
  #"wrap",
  #"selection_list",
@@ -94,7 +94,7 @@ members = [
  "examples/modal_component",
  #"examples/multiple_modals",
  "examples/tab_bar",
- #"examples/tabs",
+ "examples/tabs",
  #"examples/time_picker",
  #"examples/wrap",
  "examples/number_input",

src/native/tab_bar.rs

@@ -29,7 +29,7 @@ pub use crate::style::tab_bar::{Appearance, StyleSheet};
 pub use tab_label::TabLabel;
 
 /// The default icon size.
-const DEFAULT_ICON_SIZE: f32 = 32.0;
+const DEFAULT_ICON_SIZE: f32 = 16.0;
 /// The default text size.
 const DEFAULT_TEXT_SIZE: f32 = 16.0;
 /// The default size of the close icon.
@@ -367,7 +367,8 @@ where
  .size(size)
  .font(font.unwrap_or_default())
  .horizontal_alignment(alignment::Horizontal::Center)
- .vertical_alignment(alignment::Vertical::Center)
+ .vertical_alignment(alignment::Vertical::Bottom)
+ .shaping(text::Shaping::Advanced)
  }
 
  fn layout_text<Renderer>(text: &str, size: f32, font: Option<Font>) -> Text<'_, Renderer>
@@ -380,7 +381,8 @@ where
  .size(size)
  .font(font.unwrap_or_default())
  .horizontal_alignment(alignment::Horizontal::Center)
- .vertical_alignment(alignment::Vertical::Center)
+ .vertical_alignment(alignment::Vertical::Bottom)
+ .shaping(text::Shaping::Advanced)
  }
 
  let row = self
@@ -392,23 +394,28 @@ where
  match tab_label {
  TabLabel::Icon(icon) => Column::new()
  .align_items(Alignment::Center)
- .push(layout_icon(icon, self.icon_size, self.icon_font)),
+ .push(layout_icon(icon, self.icon_size + 1.0, self.icon_font)),
 
  TabLabel::Text(text) => Column::new()
+ .padding(5.0)
  .align_items(Alignment::Center)
- .push(layout_text(text, self.icon_size, self.icon_font)),
+ .push(layout_text(text, self.text_size + 1.0, self.text_font)),
 
  TabLabel::IconText(icon, text) => {
  let mut column = Column::new().align_items(Alignment::Center);
 
  match self.position {
  Position::Top => {
  column = column
- .push(layout_icon(icon, self.icon_size, self.icon_font))
+ .push(layout_icon(
+ icon,
+ self.icon_size + 1.0,
+ self.icon_font,
+ ))
  .push(layout_text(
  text,
- self.icon_size,
- self.icon_font,
+ self.text_size + 1.0,
+ self.text_font,
  ));
  }
  Position::Right => {
@@ -417,13 +424,13 @@ where
  .align_items(Alignment::Center)
  .push(layout_icon(
  icon,
- self.icon_size,
+ self.icon_size + 1.0,
  self.icon_font,
  ))
  .push(layout_text(
  text,
- self.icon_size,
- self.icon_font,
+ self.text_size + 1.0,
+ self.text_font,
  )),
  );
  }
@@ -433,23 +440,27 @@ where
  .align_items(Alignment::Center)
  .push(layout_text(
  text,
- self.icon_size,
+ self.icon_size + 1.0,
  self.icon_font,
  ))
  .push(layout_icon(
  icon,
- self.icon_size,
- self.icon_font,
+ self.text_size + 1.0,
+ self.text_font,
  )),
  );
  }
  Position::Bottom => {
  column = column
- .push(layout_text(text, self.icon_size, self.icon_font))
+ .push(layout_text(
+ text,
+ self.icon_size + 1.0,
+ self.icon_font,
+ ))
  .push(layout_icon(
  icon,
- self.icon_size,
- self.icon_font,
+ self.text_size + 1.0,
+ self.text_font,
  ));
  }
  }
@@ -477,7 +488,8 @@ where
  })
  .width(self.width)
  .height(self.height)
- .spacing(self.spacing);
+ .spacing(self.spacing)
+ .align_items(Alignment::Center);
 
  let element: Element<Message, Renderer> = Element::new(row);
  let tab_tree = if let Some(child_tree) = tree.children.get_mut(0) {
@@ -695,7 +707,7 @@ fn draw_tab<Renderer>(
  line_height: LineHeight::Relative(1.3),
  shaping: iced_widget::text::Shaping::Advanced,
  },
- Point::new(icon_bounds.center_x(), icon_bounds.center_y()),
+ Point::new(icon_bounds.x, icon_bounds.center_y()),
  style.icon_color,
  );
  }
@@ -714,7 +726,7 @@ fn draw_tab<Renderer>(
  line_height: LineHeight::Relative(1.3),
  shaping: iced_widget::text::Shaping::Advanced,
  },
- Point::new(text_bounds.center_x(), text_bounds.center_y()),
+ Point::new(text_bounds.x, text_bounds.center_y()),
  style.text_color,
  );
  }

src/native/tabs.rs

@@ -15,7 +15,10 @@ use iced_widget::{
  layout::{Limits, Node},
  mouse::{self, Cursor},
  renderer,
- widget::{Operation, Tree},
+ widget::{
+ tree::{State, Tag},
+ Operation, Tree,
+ },
  Clipboard, Element, Event, Layout, Length, Point, Rectangle, Shell, Size, Widget,
  },
  runtime::Font,
@@ -276,11 +279,23 @@ where
  TabId: Eq + Clone,
 {
  fn children(&self) -> Vec<Tree> {
- self.tabs.iter().map(Tree::new).collect()
+ let tabs = Tree {
+ tag: Tag::stateless(),
+ state: State::None,
+ children: self.tabs.iter().map(Tree::new).collect(),
+ };
+
+ let bar = Tree {
+ tag: self.tab_bar.tag(),
+ state: self.tab_bar.state(),
+ children: self.tab_bar.children(),
+ };
+
+ vec![bar, tabs]
  }
 
  fn diff(&self, tree: &mut Tree) {
- tree.diff_children(&self.tabs);
+ tree.children[1].diff_children(&self.tabs);
  }
 
  fn width(&self) -> Length {
@@ -291,25 +306,27 @@ where
  self.height
  }
 
- fn layout(&self, renderer: &Renderer, limits: &Limits) -> Node {
+ fn layout(&self, tree: &mut Tree, renderer: &Renderer, limits: &Limits) -> Node {
  let tab_bar_limits = limits.width(self.width).height(Length::Shrink);
-
- let mut tab_bar_node = self.tab_bar.layout(renderer, &tab_bar_limits);
+ let mut tab_bar_node =
+ self.tab_bar
+ .layout(&mut tree.children[0], renderer, &tab_bar_limits);
 
  let tab_content_limits = limits.width(self.width).height(self.height);
 
- let mut tab_content_node = self
- .tabs
- .get(self.tab_bar.get_active_tab_idx())
- .map_or_else(
- || {
- Row::<Message, Renderer>::new()
- .width(Length::Fill)
- .height(Length::Fill)
- .layout(renderer, &tab_content_limits)
- },
- |element| element.as_widget().layout(renderer, &tab_content_limits),
- );
+ let mut tab_content_node =
+ if let Some(element) = self.tabs.get(self.tab_bar.get_active_tab_idx()) {
+ element.as_widget().layout(
+ &mut tree.children[1].children[self.tab_bar.get_active_tab_idx()],
+ renderer,
+ &tab_content_limits,
+ )
+ } else {
+ Row::<Message, Renderer>::new()
+ .width(Length::Fill)
+ .height(Length::Fill)
+ .layout(tree, renderer, &tab_content_limits)
+ };
 
  tab_bar_node.move_to(Point::new(
  tab_bar_node.bounds().x,
@@ -390,7 +407,7 @@ where
  .get_mut(idx)
  .map_or(event::Status::Ignored, |element| {
  element.as_widget_mut().on_event(
- &mut state.children[idx],
+ &mut state.children[1].children[idx],
  event,
  tab_content_layout,
  cursor,
@@ -449,7 +466,7 @@ where
  let idx = self.tab_bar.get_active_tab_idx();
  if let Some(element) = self.tabs.get(idx) {
  let new_mouse_interaction = element.as_widget().mouse_interaction(
- &state.children[idx],
+ &state.children[1].children[idx],
  tab_content_layout,
  cursor,
  viewport,
@@ -508,7 +525,7 @@ where
  let idx = self.tab_bar.get_active_tab_idx();
  if let Some(element) = self.tabs.get(idx) {
  element.as_widget().draw(
- &state.children[idx],
+ &state.children[1].children[idx],
  renderer,
  theme,
  style,
@@ -535,7 +552,7 @@ where
  self.tabs
  .get_mut(idx)
  .map(Element::as_widget_mut)
- .and_then(|w| w.overlay(&mut state.children[idx], layout, renderer))
+ .and_then(|w| w.overlay(&mut state.children[1].children[idx], layout, renderer))
  })
  }
 
@@ -549,7 +566,7 @@ where
  let active_tab = self.tab_bar.get_active_tab_idx();
  operation.container(None, layout.bounds(), &mut |operation| {
  self.tabs[active_tab].as_widget().operate(
- &mut tree.children[active_tab],
+ &mut tree.children[1].children[active_tab],
  layout
  .children()
  .nth(1)