請問各位:

firemonkey 有沒有可以做到如下圖(或接近)的元件
底下這個圖片是我使用 tms 元件開發的, 但是 tms 效能太吃顯示效能, 使用起來會卡卡的, 觸控的反應也不好(我的已是用4核 android 手機, HTC 816), 但已遍尋XE10, 找不到可以做出 TILE THUMB 效果的元件, 不知那位前輩有實作過, 可否提供一些方向

如果使用內建元件功能，可以使用 Style + Grid 來做，可以參考官方的 ListBox 裡的 Style 運用方法。但是使用 Style 這種方法，在移動平台，速度效能還是有待加強。
如果真的想要速度快，要自己設計元件，並且用自繪方式（依需求全部自行用 Canvas 繪製），速度才算合格，但這樣太累了。
另外還有第三方元件 FirePower 可以參考 http://www.woll2woll.com/

編輯記錄

感謝 main chen 的回覆, 我曾實作過 Style , 其實我要的很簡單, 就一張圖片, 一個text說明, 一個checkbox,



Listbox 總數約在 100 組, 所以效能上應不致太差(圖片只有 70*70)
但我實作的部份有兩個問題
1. 做出來的 item 都無法選擇(沒有seleection的感覺, 但 checkbox 可異動)
2. image 永遠出不來, image 是存在 firedac 資料庫, 我試過 imagelist, image.bitmp 等都不行
ListBox 的 demo 可用, 但我做出來的有問題, ListBox 的範例我看了n 遍, 始終不知道問題出在那?

Item := TListBoxItem.Create(nil);
Item.Parent := ListBox1;
Item.StyleLookup := 'style_colorset';
Item.Selectable := True;
Item.StylesData['colorcheck'] := true; // set Checkbox value
Item.StylesData['colorcheck.text'] := '紅色特別款';
Item.Itemdata.bitmap := image1.bitmap ;

編輯記錄

這行改成如下試試 (我這裡測試是可以正常)
Item1.StylesData['colorcheck.IsChecked'] := True;
更正: 應該使用 colorcheck.IsChecked

編輯記錄

我實在不知道 xe10 的 ListBox demo 是怎麼辦到的
使用下列的用法竟然可以正常顯示, 而我用這個方法怎麼也出不來
Item.ItemData.Bitmap := Image1.Bitmap

感謝 main chen 給予的提示, 讓我突然有"一道光"閃過
我利用這個方法, 圖片終於可以顯示
Item.StyleData('colorimage.bitmap') := image1.bitmp
如果是使用 imagelist 的話
Item.StyleData('colorimage.bitmpa') := imageList1.Source[0].MultiResBitmap[0].Bitmap

仍有一個問題, 在 win32的環境下, mouse click checkbox 位置, 會有 selection 的顯示
但如果點bitmap 則不會有selection 的反應,
但如果放在 android 下, mouse click checkbox, 不會有 selection 的反應, 但 checkbox 會改變
點圖形也不會有selection 反應
看來還有很長的路要走....哭....
===================引 用 Main Chen 文 章===================
這行改成如下試試 (我這裡測試是可以正常)
Item1.StylesData['colorcheck.IsChecked'] := True;
更正: 應該使用 colorcheck.IsChecked

補充
在win32下, 把 image(在Style裡面)的 hittest 改為 false, 讓image 透到 Listbox 上, 點圖就可以有selection了, 但在 android 上還是不行
但如果是在 ListBox 設計時就把 ListBox Item add進來, 而不是以code方式建立, Android 下是可以有selection的

所謂的selection 是點選到 ListBoxItem時, ListBox對所按到的Item會呈現藍色背景的效果, 讓我們可以知道是點到那一個Item

又有一個新問題
我實際放到程式中後, 發現 ListBox 經過捲過後再回來, 所有圖片都看不到了?????

看了你的需求, 我實做了一下, 每一個環節應該都能克服:

1. 點 Check 要能 Select 可以在 Check 事件下手
2. 圖片在捲動時會消失或亂套, 可以在 OnApplyStyleLookup 下手

原始碼:
[code delphi]
unit Main;

interface

uses
System.SysUtils, System.Types, System.UITypes, System.Classes, System.Variants,
System.Rtti,
FMX.Types, FMX.Controls, FMX.Forms, FMX.Graphics, FMX.Dialogs, FMX.Layouts,
FMX.ListBox, FMX.StdCtrls, FMX.Controls.Presentation, FMX.Objects,
System.ImageList, FMX.ImgList;

type
TForm1 = class(TForm)
ItemLayout: TLayout;
Image1: TImage;
Label1: TLabel;
CheckBox1: TCheckBox;
ListBox1: TListBox;
Image2: TImage;
ImageList1: TImageList;
procedure FormCreate(Sender: TObject);
private
Chk: array[0..100] of Boolean;
procedure ImageClick(Sender: TObject);
procedure CheckBoxChange(Sender: TObject);
procedure ItemApplyStyleLookup(Sender: TObject);
public
{ Public declarations }
end;

var
Form1: TForm1;

implementation

{$R *.fmx}

procedure TForm1.FormCreate(Sender: TObject);
var i: Integer;
Item1: TListBoxItem;
begin
for i:=0 to 100 do
begin
Item1 := TListBoxItem.Create(ListBox1);
Item1.StyleLookup := 'ItemStyle';
Item1.Tag := i;
Item1.Height := ItemLayout.Height;
Item1.Parent := ListBox1;
Item1.OnApplyStyleLookup := ItemApplyStyleLookup;

Item1.StylesData['Label.Text'] := i.ToString;
Item1.StylesData['Check.IsChecked'] := Chk[i];
Item1.StylesData['Image.Tag'] := i;
Item1.StylesData['Check.Tag'] := i;
Item1.StylesData['Image.OnClick'] := TValue.From(ImageClick);
end;
end;

procedure TForm1.ImageClick(Sender: TObject);
begin
ShowMessage(TImage(Sender).Tag.ToString);
end;

procedure TForm1.ItemApplyStyleLookup(Sender: TObject);
var Image_: TFmxObject;
begin
Image_ := TListBoxItem(Sender).FindStyleResource('Image');
if (Image_ is TImage) and (Image_ <> nil) then
begin
TImage(Image_).Bitmap := ImageList1.Bitmap(TSizeF.Create(70, 70), TListBoxItem(Sender).Tag mod ImageList1.Count);
end;
end;

procedure TForm1.CheckBoxChange(Sender: TObject);
begin
ListBox1.ItemIndex := TCheckBox(Sender).Tag;
end;

end.
[/code]

再次感謝 main chen 的指導, 提供非常有用的資訊
不過我實作的結果
如果按 (Sender).Tag mod ImageList1.Count 這個方法取得 ImageList index 會造成閃退
而我把它改成直接指定 index 則可過, 但是沒有出現圖片
我想最終的問題不是出在這段程式, 而是 imagelist 載入圖片的問題,
由於我的圖片是放在 firedac 中的 blob 內, 要把 blob 的圖片取出放到 imagelist 上, 之前的學習經驗在 fmx 上似乎差距很大,
以往在delhpi寫法沒有問題的, 應用在 fmx 上卻不管用
但如果我把圖片都先預載到 imagelist (即在 design mode 就把 imagelist 加入 99張圖片)
在 Listbox 上確實可以出現這些圖, 捲動也不會消失,
所以我猜一切的問題應該是在 imagelist 的動作上,
我可能還是要研究看看 imagelist 的用法
然而裁稿日子越來越近, 實在沒有辦法再浪費在 fmx search 上作功能, 暫時還是只能用 tms 元件來處理,
至少它不用搞那麼多程式及問題

用 ListBox 应该是可以的。

1. StyleName 需要设置，否则无法使用 ItemData;
2. Colums := 2;
3. 默认是可以选择的。想要 Item 不可以被选择，还需要单独设置。
4. 可以设置多选。

----------------
其实，类似需求，除了 ListBox 以外，可以自己做。比如，做一个 Frame，里面放你想放的任何东西。也就是用 Frame 来组合出新的 Control。然后，用 GridPanelLayout 或者其它 Grid 来放这些 Frame。超出屏幕需要卷动，则加上 ScrollBox。

感謝回覆, 我相信 ListBox是可以做到的, 因為原廠提供的 demo 就可以, 但自己實作的不行, 那肯定是那裡出問題了, 只是問題在那呢....
以下所提的都已經嘗試過也實作過, win32確實可以有selection, 但 android 卻沒有(這是指由code來建立一切的ListBoxItem)
至於用Frame, 我也想過, 甚至也測試過Grid, 但都不符合我想要訴求的功能, 比較能接近的就是ListBox了
===================引 用 pcplayer99 文 章===================
用 ListBox 应该是可以的。

1. StyleName 需要设置，否则无法使用 ItemData;
2. Colums := 2;
3. 默认是可以选择的。想要 Item 不可以被选择，还需要单独设置。
4. 可以设置多选。

----------------
其实，类似需求，除了 ListBox 以外，可以自己做。比如，做一个 Frame，里面放你想放的任何东西。也就是用 Frame 来组合出新的 Control。然后，用 GridPanelLayout 或者其它 Grid 来放这些 Frame。超出屏幕需要卷动，则加上 ScrollBox。

用 Frame 肯定没问题。我已经做过类似的了。

TListBox 也应该没问题。有空我做一个 DEMO 给你。

先感謝 pcplayer99的支援!

===================引 用 pcplayer99 文 章===================
用 Frame 肯定没问题。我已经做过类似的了。

TListBox 也应该没问题。有空我做一个 DEMO 给你。

不知道这样是不是你要的效果？这个是 ListBox 做的。

類似!

我要的是 image text 兩組 checkBox 組, 主要是列出顏色表可供 user 選擇, 大概一個畫面是
4 column * 8 row 大小 (每個 cell 約 80 * 80)
最重要的是 點選 checkbox 速度要夠快, 也就是 "手起刀落" 般的反應, 只要按下去就會觸發 checkbox

procedure TForm1.SpeedButton1Click(Sender: TObject);
var
i: Integer;
j: Integer;
Item: TListBoxitem;
begin
j := 0;
ListBox1.BeginUpdate;
try
for i := 0 to 50 do
begin
Item := TListBoxItem.Create(ListBox1);
Item.Parent := ListBox1;
Item.StyleLookup := 'listboxitembottomdetail';
Item.Text := Format('-', [i]);
Item.ItemData.Detail := '红色';
Item.Height := 40;
Item.ImageIndex := j;
Inc(J);
if J > 2 then J := 0;

end;
finally
ListBox1.EndUpdate;
end;
end;

感謝提供語法, 不過因最近結案在即以及 imagelist 我還沒解決如何由 db 導入的問題, 所以暫時還無法測試, 等把案子結了再進行轉換試試看, 十分感恩~~

这里可以不用 ImageList，而是直接给 TListBoxItem.ItemData.Bitmap 给图，比如 LoadFromStream

而 DB 里面的图，应该是 TBlobField(FieldByName('PIC')).SaveToStream 得来。

謝謝指點,
我之所以會想用imagelist 的原因是, 這些 colorimage 並不是隨時在變更的, 而這組Listbox是放在 form3 中create 被建立的, 所以不想每次建立 ListBox 時都要重覆進行 loadformstream 的做法, 會在 form1 (form1 會 call form3) create 時, 就先預載 imagelist 進來, 如此即便關閉 form3 重新 create, 我就不用再重新 loadfrom 來浪費手機資源了
===================引 用 pcplayer99 文 章===================
这里可以不用 ImageList，而是直接给 TListBoxItem.ItemData.Bitmap 给图，比如 LoadFromStream

而 DB 里面的图，应该是 TBlobField(FieldByName('PIC')).SaveToStream 得来。

http://4.bp.blogspot.com/-L8x12hqiJpA/VppvwRUFOmI/AAAAAAAAAdQ/C9gX4fxp8G4/s1600/06.png

https://youtu.be/Kpb_SPxai2s


RAD Studio 10 Seattle - Delphi List 布料選取功能



示範從 SQLite 資料庫動態選取資料，以 List 方式呈顯資料內容，並以 CheckBox 顯示選取與否。



Google Play 商店：

https://play.google.com/store/apps/details?id=com.NolanLiao1965.DraperyChoose



測試手機：ASUS 華碩 Zenfon 2

手機環境：Android 5.0

開發環境：RAD Studio 10 Seattle 23.0.21418.4207 Update 1

作業系統：Windows 10 專業版 (64 位元)



SQLite 資料庫：

CREATE TABLE [CottonMaterial] (

[ID] TEXT NOT NULL,

[Name] TEXT NOT NULL,

[Photo] BLOB NOT NULL,

[Status] NOT NULL,

CONSTRAINT [CottonMaterial_Index] PRIMARY KEY ([ID]));

編輯記錄

我想要達到的理想功能就是noname所提供的內容, 但只能看到圖片(下一個網址進入出現影片已被移除)
不知可否賜教設計的技巧?
謝謝...
===================引 用 NolanLiao 文 章===================
http://4.bp.blogspot.com/-L8x12hqiJpA/VppvwRUFOmI/AAAAAAAAAdQ/C9gX4fxp8G4/s1600/06.png
https://youtu.be/ETfsr_lOYbs

RAD Studio 10 Seattle - Delphi List 布料選取功能
YouTube：
https://youtu.be/Kpb_SPxai2s

在下我實在忍不住要說話一下。得罪人不是我的style。但放心裡很久，看太久了…

nolan 經常都是只提供 apk，或是影片，告知自己或是產品有多行? 如果只是想要表達這樣的想法，請至作品分享區 (其實也不太合，因為沒source code)，或許網友交流篇比較適合。
這裡是論壇，自古以來都是交流技術的地方，不是「展示中心」。交流的目的就在分享技術，交學相長。許多的朋友，如，知名的張子仁講師，經常公開源碼給台灣與大陸的朋友，或是在其blog上有程式可參考。又如，James 阮，林壽山等，都是如此。我殊不知「幾乎都是展示技術」的意思為何? 個人認為，學問有保鮮期，過了就沒啥。人生也帶不走。如果願意，分享是很好的。如果覺得是自己的辛苦技術，不想公開於世，那就別回覆了。如此都不會有爭議。

以上是我個人的想法，我個人負責，不代表 ktop。不過我僅僅對事不對人，沒人身攻擊的意思。就事論事。近年來世界都在推 open source，即便我不全然認同，但是總是把技術鎖緊緊的真的有意義嗎? 大家可以深思一下。若是想因此而「宣傳某產品」或是「為自己打名號」或是「借此來得到外包」，真的請到交流區比較適當!

當然，也謝謝提供一些資訊，僅管意義不大。

===================引 用 P.D. 文 章===================
我想要達到的理想功能就是noname所提供的內容, 但只能看到圖片(下一個網址進入出現影片已被移除)
不知可否賜教設計的技巧?
謝謝...
===================引 用 NolanLiao 文 章===================
http://4.bp.blogspot.com/-L8x12hqiJpA/VppvwRUFOmI/AAAAAAAAAdQ/C9gX4fxp8G4/s1600/06.png
https://youtu.be/ETfsr_lOYbs

------


蕭沖
--All ideas are worthless unless implemented--

C++ Builder Delphi Taiwan G+ 社群
http://bit.ly/cbtaiwan

蕭大俠且別太激動，記得PD版主去上課後的發文是：有些東西不方便發表，這就是我在
http://delphi.ktop.com.tw/board.php?cid=32&fid=107&tid=107955
感嘆的原由。或許，有些技術是受到廠方限制的。

我輩並非只會抄襲，只是原廠黑箱與BUG一堆，更有些BUG是在很初始的源頭，不是繼承修改就能解決。
如果原廠自認是超高技術，或有爛問題怕被發現，而不公開，我們真的很無奈！

總之，原廠資訊封閉且混亂，才是問題的根源，其他的，就暫且放下吧！

在此鄭重聲明，本人並非捷康的員工也不是股東，每年還必須付捷康維護費，實在沒必要幫捷康「宣傳某產品」。

至於提供 Apk 及影片，只是想與同好交流「Delphi」的功能可以如何運用，可以做出很好的成品。
如果因此讓人有「為自己打名號」或是「借此來得到外包」的誤解，我只能說：本來無一物,何處惹塵埃！
若在這裡發表不恰當，之後我會轉移至交流區或部落格發表，若網友有技術問題可互相私下聯繫，就技術方面討論，彼此成長，讓「Delphi」成為一個強大的工具。
就這樣，謝謝指教！

不好意思, 我的貼文引來大家的爭議, 實在過意不去, 每個人有自己的看法, 不方便提供那也不能說什麼唄, 不過本案的部份我這一兩有空一點空間終於試出來了, 而最後是採用 main chen 提供的做法, 我做了一些的改進, 已經能將圖片正常的顯示出來, 等我整理好, 再分享給大家在codeing 上的技術, 我個人覺得如果radstudio要繼續發展下去, 技術就要傳承, 不過雖然第一段的問題已過關, 但現又有一個令人頭痛的問題, 這一兩天 xe10 老間發生 run time時就出現 item not found 的錯誤, 對此實在是不知道那裡出問題, 每每都要重新開機, 又可以好的一兩次, 是我的xe要掛了嗎?

這是我最後做出的結果, 上下捲動也不會消失了,
但又有新問題就是了, 我還在努力尋答案中, 就是我做不出 "全選" 的功能
至於細節, 整理後再公佈原始碼

感謝曾提供指導的各位前輩們, 秉著傳承的精神, 我把這段研究出來的code分享給各位, 或許很多人對於 Style 的做法不熟, 其實我也不熟, 是這次需求才首次接觸的, 所以如果還有不對的地方, 也請各位前輩能再次指點
以下是建置一個StyleBook 的說明, 很簡單, TLayout, TImage, TCheckBox, TRetangle, TText 構成, 結構如下圖
每一方框是 80 * 80
為方便CheckBox 可以全框都可以被點選, 所以範圍是全框,
stylebook.name 我命名為 resource1
layout.name = style_colorset
image.name = colorimage
checkbox.name = colorcheck
text.name = colortext
因為 rectangle 只是為了營造一個文字的背景, 所以沒有特別作用




程式的部份
最重要的建構程式(button1), 以下是我程式全貌, 有一個元件是使用 tms 的image 元件, 因為要搭配其他設計考量, 各位可以參考改成 ImageList 的用法, 為了方便說明, 我把這個tms 元件就當成 ImageList 來說明
procedure TForm_D2001.btn_ColorChooseClick(Sender: TObject);
var i : integer;
item : TListBoxItem;
mst : TMemoryStream;
bc_it : TTMSFMXBitmapItem;
begin
// 這是為了將 sdb 檔內存的圖片放到 imagelist中
// 因為圖片是固定的, 所以不想每次建立ListBox都要存一次到 imagelist, 所以加入以下判斷
if lbx_ColorList.Items.Count > 0 then exit;
with DM_CameraPart do
begin
FDT_Color.Open;
FDT_Color.First;
i := 0;
// 建立預設的色盤圖組
// Color_BitmapContainer 是 tms 管理圖片的元件, 就當成是 imagelist 就好了
// 至於 ImageList 如何加入圖片, 不在本次的重點, 所以不另加說明
// FDT_Color 是 FireDac 的 TTable
if Color_BitmapContainer.Items.Count = 0 then
begin
while not FDT_Color.Eof do
begin
bc_it := Color_BitmapContainer.Items.Add;
if FDT_ColorPICT1.BlobSize > 0 then bc_it.Bitmap.Assign(FDT_ColorPICT1);
bc_it.Name := FDT_ColorDNO.AsString.Trim;
bc_it.Tag := i;
FDT_Color.Next;
inc(i);
end;
end;

// 建立預設的色表
// lbx_ColorList 是 ListBox, 拉一個 ListBox, 不加入任何 ListBoxItem, 採用 RunTime 模式建立
lbx_ColorList.Columns := 3;
lbx_ColorList.ItemHeight := 80;
lbx_ColorList.BeginUpdate;
FDT_Color.First;
i := 0;
while not FDT_Color.Eof do
begin
item := TListBoxItem.Create(nil);
item.Parent := lbx_ColorList;
item.StyleLookup := 'style_ColorSet';
item.Name := 'ListBoxItem' i.ToString;
item.OnApplyStyleLookup := ItemApplyStyleLookup; // 這是觸發applystyle event 的 procedure, 要另外寫
item.Tag := i;
item.Margins.Top := 5;
item.Margins.Bottom := 5;
item.Margins.Left := 5;
item.Margins.Right := 5;
item.Selectable := True;
item.StylesData['colortext.text'] := FDT_ColorPHRASE.AsString.Trim;
item.StylesData['colorcheck.text'] := FDT_ColorDNO.AsString.Trim;
item.StylesData['colorcheck.IsChecked'] := False;
item.StylesData['colorimage.Tag'] := i;
item.StylesData['colorcheck.Tag'] := i;
FDT_Color.Next;
inc(i);
end;
lbx_ColorList.EndUpdate;
DM_CameraPart.FDT_Color.Close;
end;
end;

要宣告

private
{ Private declarations }
procedure CheckBoxChange(Sender: TObject);
procedure ItemApplyStyleLookup(Sender: TObject);
...

實作
// 這個最重要的功能是讓ImageList 放到 ListBox 上保存, 如果不下這段, 會造成首次有圖, 一旦捲動再回來圖就不見了
// 要感謝 main chen 的指導
// idx 是取得目前 LIstBoxItem 的index, 然後對應到 ImageList 的 item
procedure TForm_D2001.ItemApplyStyleLookup(Sender: TObject);
var Image_: TFmxObject;
idx : integer;
begin
idx := TListBoxItem(Sender).Tag;
Image_ := TListBoxItem(Sender).FindStyleResource('colorimage');
if (Image_ is TImage) and (Image_ <> nil) then
begin
TImage(Image_).Bitmap := DM_CameraPart.Color_BitmapContainer.Items[idx].Bitmap;
end;
end;

// 這段是處理按下 ListBoxItem 中的 CheckBox 可即時獲得 ListBoxItem 的 index, 這樣, CheckBox 才能對應到正確的ListBoxItem
procedure TForm_D2001.CheckBoxChange(Sender: TObject);
begin
lbx_ColorList.ItemIndex := TCheckBox(Sender).Tag;
end;

以上就是這些code, 看似沒什麼, 但對我們完全沒有接觸的人來說, 如何自定StyleBook, 如何管理StyleBook 中的Style等等, 根本是天方夜譚的神話, 一切還是要感謝 main chen 的指導, 當然 pcplayer99 所提供的方法也是可以達到, 不過這是利用ListBox內建提供的模式進行, 確實是簡單多, 然而功能上還是有些想要達成的目標做不到, 但還是感謝提供

但目前我仍遭遇一個問題, 就是如何利用code 可以自動將所有的 CheckBox 都勾選或取消, 還在google 文獻中, 如有最新發展, 再分享給各位

謝謝pd大分享，雖然我已經有一陣子不用 delphi / cb 了。希望 delphi/cb 還能繼續走下去，必竟有很深的感情，而且某種程度來說也不錯用。 ^_^

如果 Liao 兄未來也能在技術「講解技巧上」，或是「部份源碼上」可以分享，那也是大家的福氣 ! 我沒有趕人的意思。再次重申。謝謝!

------


蕭沖
--All ideas are worthless unless implemented--

C++ Builder Delphi Taiwan G+ 社群
http://bit.ly/cbtaiwan

編輯記錄

示範布料選取 原始程式碼解說在 Youtube 影音第 SQLite 資料庫：
CREATE TABLE [CottonMaterial] (
[ID] TEXT NOT NULL,
[Name] TEXT NOT NULL,
[Photo] BLOB NOT NULL,
[Status] NOT NULL,
CONSTRAINT [CottonMaterial_Index] PRIMARY KEY ([ID]));