nim_duilib（6）之listbox

introduction

• 更多控件用法，請參考 here 和 源碼。
• 本文的代碼基於這里
• 本文將演示listbox的添加，刪除，刪除選中項，添加到指定位置等常用功能。

xml文件添加代碼

基於上一篇, 繼續向basic.xml中添加下面關於ListBox的代碼。 xml完整源碼在文末。

<HBox>
  <!-- List -->
  <VListBox class="list" name="list" padding="5,3,5,3">
  </VListBox>
  <VBox>
    
    <!-- Buttons -->
    <CheckBox class="checkbox_font12" name="list_checkbox_add_to_top" text="add to top" margin="0,5,0,10"/>
    <Button class="btn_global_blue_80x30" name="list_btn_add" text="add" />
    
    <CheckBox class="checkbox_font12" name="list_checkbox_remove_all" text="del all?" margin="0,5,0,10"/>
    <Button class="btn_global_white_80x30" name="list_btn_remove" text="remove"/>
  </VBox>
</HBox>

上面的代碼創建了一個水平容器，容器從左往右分別是：listbox和一個垂直容器，垂直容器中從上到下是復選框和按鈕。效果如下：

代碼中關聯

BasicForm.h

• 打開BasicForm.h，類中添加下面的代碼用於關聯界面控件。

	// list
	ui::ListBox	*plist_;
	// list的刪除和添加按鈕
	ui::Button	*plist_btn_arr_[2];
	// list 的復選框，
	ui::CheckBox	*plist_cb_arr_[2];

同時，類中再額外添加2個函數，用於監聽Add和remove的點擊。

	// list的刪除和添加
	bool OnListBoxAddItem(ui::EventArgs* msg);
	bool OnListBoxRemoveItem(ui::EventArgs* msg);

BasicForm.cpp

InitWindow函數

• 轉到BasicForm.cpp，找到 InitWindow 函數，向其增加下面的代碼

void BasicForm::InitWindow()
{
  ......
	// 4.list控件
	//----------------------------------------------------------------------------------------
	plist_ = dynamic_cast<ui::ListBox*>(FindControl(L"list"));
	if (plist_)
	{
		for (auto i = 0; i < 15; ++i)
		{
			ui::ListContainerElement* pelement = new(std::nothrow) ui::ListContainerElement;
			if (pelement)
			{
				// 設置item顯示的內容
				pelement->SetText(nbase::StringPrintf(L"%d", i));
				// 設置item的樣式，可以在global.xml中找到
				pelement->SetClass(L"listitem");
				pelement->SetFixedHeight(20);
				plist_->Add(pelement);
			}
		}
	}

	// list關聯的刪除和添加按鈕
	plist_btn_arr_[0] = dynamic_cast<ui::Button*>(FindControl(L"list_btn_add"));
	plist_btn_arr_[1] = dynamic_cast<ui::Button*>(FindControl(L"list_btn_remove"));

	if (plist_btn_arr_[0])	
		plist_btn_arr_[0]->AttachClick(nbase::Bind(&BasicForm::OnListBoxAddItem, this, std::placeholders::_1));
	
	if (plist_btn_arr_[1])
		plist_btn_arr_[1]->AttachClick(nbase::Bind(&BasicForm::OnListBoxRemoveItem, this, std::placeholders::_1));

	// list 關聯checkbox
	plist_cb_arr_[0] = dynamic_cast<ui::CheckBox*>(FindControl(L"list_checkbox_add_to_top"));
	plist_cb_arr_[1] = dynamic_cast<ui::CheckBox*>(FindControl(L"list_checkbox_remove_all"));
}

OnListBoxAddItem

函數體代碼如下

bool BasicForm::OnListBoxAddItem(ui::EventArgs* msg)
{
	if (plist_)
	{
		static int count_start_15 = 15;
		ui::ListContainerElement* pelement = new(std::nothrow) ui::ListContainerElement;
		if (pelement)
		{
			// 設置item顯示的內容
			pelement->SetText(nbase::StringPrintf(L"%d", count_start_15));
			// 設置item的樣式，可以在global.xml中找到
			pelement->SetClass(L"listitem");
			pelement->SetFixedHeight(20);

			// 添加到最前面
			if (plist_cb_arr_[0]->IsSelected())
				plist_->AddAt(pelement, 0);
			else 
				plist_->Add(pelement);

			++count_start_15;
		}
	}

	return false;
}

OnListBoxRemoveItem

OnListBoxRemoveItem函數體如下：

bool BasicForm::OnListBoxRemoveItem(ui::EventArgs* msg)
{
	if (plist_)
	{
		if (plist_cb_arr_[1])
		{
			if (plist_cb_arr_[1]->IsSelected())
			{
				int list_count = plist_->GetCount();
				if (0 < list_count)
					plist_->RemoveAll();
				else
					;
			}
			else
			{
				int index = plist_->GetCurSel();
				// 沒有選中，將返回-1
				if (-1 != index)
				{
					plist_->RemoveAt(index);
				}
				else
				{
					;
				}
			}
		}
		else
		{
			;
		}

	}
	else
	{
		;
	}

	return false;
}

運行結果

xml完整源碼

<?xml version="1.0" encoding="UTF-8"?>
<Window size="800,400" caption="0,0,0,35">
  <VBox bkcolor="bk_wnd_darkcolor">
    <HBox width="stretch" height="35" bkcolor="bk_wnd_lightcolor">
      <Control />
        <Button class="btn_wnd_min" name="minbtn" margin="4,6,0,0" />
        <Box width="21" margin="4,6,0,0">
          <Button class="btn_wnd_max" name="maxbtn"/>
          <Button class="btn_wnd_restore" name="restorebtn" visible="false"/>
        </Box>
      <Button class="btn_wnd_close" name="closebtn" margin="4,6,8,0"/>
    </HBox>

    <!--下面是中間的控件-->
    <VBox padding="30, 30, 30, 30" >   
      <HBox>
        <VBox>
          <!-- Buttons -->
          <Button class="btn_global_blue_80x30" name="btn_blue" text="blue" />
          <Button class="btn_global_white_80x30" name="btn_white" text="white"/>
          <Button class="btn_global_red_80x30" name="btn_red" text="red"/>
        </VBox>
        
        <!--checkbox-->
        <VBox>
          <CheckBox class="checkbox_font12" name="checkbox1" text="checkbox1" margin="0,5,0,10" selected="true"/>
          <CheckBox class="checkbox_font12" name="checkbox2" text="checkbox2" margin="0,5,0,10"/>
          <CheckBox class="checkbox_font12" name="checkbox3" text="checkbox3" margin="0,5,0,10"/>
        </VBox>

        <!-- option-->
        <VBox>
          <Option class="circle_option_2" name="option1" group="option_group" text="option1" margin="0,3,0,10" selected="true"/>
          <Option class="circle_option_2" name="option2" group="option_group" text="option2" margin="0,3,0,10"/>
          <Option class="circle_option_2" name="option3" group="option_group" text="option3" margin="0,3,0,10"/>
        </VBox>

        <HBox>
          <!-- List -->
          <VListBox class="list" name="list" padding="5,3,5,3">
          </VListBox>
          <VBox>
            
            <!-- Buttons -->
            <CheckBox class="checkbox_font12" name="list_checkbox_add_to_top" text="add to top" margin="0,5,0,10"/>
            <Button class="btn_global_blue_80x30" name="list_btn_add" text="add" />
            
            <CheckBox class="checkbox_font12" name="list_checkbox_remove_all" text="del all?" margin="0,5,0,10"/>
            <Button class="btn_global_white_80x30" name="list_btn_remove" text="remove"/>
          </VBox>
        </HBox>

      </HBox>
    </VBox> <!--下面是中間的控件 結束-->
  </VBox>
</Window>