說在前面

• rust新手，egui沒啥找到啥教程，這里自己記錄下學習過程
• 環(huán)境：windows11 22H2
• rust版本：rustc 1.71.1
• egui版本：0.22.0
• eframe版本：0.22.0
• 上一篇：這里

SidePanel

• 側(cè)邊欄，如下圖
  

• 其定義為：

  pub struct SidePanel {
  	side: Side,
  	id: Id,
  	frame: Option<Frame>,
  	resizable: bool, 
  	show_separator_line: bool, // 是否顯示邊框
  	default_width: f32, // 默認寬度
  	width_range: RangeInclusive<f32>, // 寬度范圍
  }
  

• 通過right()或left()方法生成：

  egui::SidePanel::right("panel_name")
  

  方法實現(xiàn)與TopBottomPanel::top()類似：

  pub fn right(id: impl Into<Id>) -> Self {
  	// id需要保證全局唯一
      Self::new(Side::Right, id)
  }
  

  生成時的默認屬性值為：

  pub fn new(side: Side, id: impl Into<Id>) -> Self {
      Self {
          side,
          id: id.into(),
          frame: None,
          resizable: true,
          show_separator_line: true,
          default_width: 200.0,
          width_range: 96.0..=f32::INFINITY,
      }
  }
  

• 我們可以將app.rs中的egui::SidePanel::left("side_panel")改成right()看下效果：
  

• 然后讓我們來看看SidePanel的其他屬性

• resizable
  默認值為true，效果如下圖 （但是為啥會變回去？而且不絲滑）
  
  右側(cè)邊欄的效果有點奇怪：
  

  設置為false后，寬度將不可變：

  egui::SidePanel::left("side_panel").resizable(false).show
  

  注意，只有在panel中有一些需要占用空間的元素時，resizable才有效，例如只保留：

  egui::SidePanel::left("side_panel").default_width(100.0).show(ctx, |ui| {
      ui.heading("Side Panel");      
  });
  

  這個時候其實無法拖拽邊框：
  

• show_separator_line
  默認值為true，修改為false后的表現(xiàn)為：

  egui::SidePanel::right("side_panel").show_separator_line(false).show(
  

  
  效果不是很明顯，因為CentralPanel也有邊框，并且沒找到方法去掉

• default_width
  默認值200.0，可通過default_width()方法進行修改：

  pub fn default_width(mut self, default_width: f32) -> Self {
  	// 修改self.default_width
      self.default_width = default_width; 
      // 依照default_width調(diào)整self.width_range
      // 例如default_width為200，那么結(jié)果依舊為96~inf
      // 例如default_width為80，那么結(jié)果為80~inf
      self.width_range = self.width_range.start().at_most(default_width)
          ..=self.width_range.end().at_least(default_width);
      self
  }
  

  （但是實際上沒有用，不知道為啥）

Ui::heading()

• 大號的文字，標題

  /// Show large text.
  ///
  /// Shortcut for `ui.label(RichText::new(text).heading())`
  pub fn heading(&mut self, text: impl Into<RichText>) -> Response {
      Label::new(text.into().heading()).ui(self)
  }
  

• 我們也可以使用ui.label(RichText::new(text).heading())來自定義，例如：

  ui.label(egui::widget_text::RichText::new("Side Panel").heading()
  	.color(Color32::GREEN));
  

  

CentralPanel

• 主面板(panel)，窗口中未被其他panel占用的部分。
• CentralPanel必須在其他panel之后添加。否則其他panel將會覆蓋CentralPanel。
• 以下是CentralPanel在SidePanel之前添加的效果，可以看到有部分元素被擋住了：
  
• 可以看看不加CentralPanel的效果：
  
• CentralPanel沒有可以自定義的屬性

Panel之間的布局

• 目前來看，egui的panel有三種：Central、Side、TopBottom

• panel的添加順序是非常重要的，先添加的在最外層，后添加的在內(nèi)層

• 例如，在我們的template中，添加順序是TopBottom、Side、Central，其結(jié)果是：
  

• 如果改為Side、TopBottom、Central，其結(jié)果為：
  

• 同時，一個窗口中panel可以不止3個，例如我們可以這樣添加：TopBottom、Side、TopBottom、Central：
  

• 如果想要將sidepanel拆分為上下兩部分，是否可以實現(xiàn)，怎樣實現(xiàn)呢？這部分留著后面探討。文章來源地址http://www.zghlxwxcb.cn/news/detail-674419.html

參考

• richtext
• sidepanel
• centralpanel

到了這里，關于【rust/egui】(五)看看template的app.rs：SidePanel、CentralPanel以及heading的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網(wǎng)！