Widżety Studio

*Ta zawartość została przetłumaczona przy użyciu narzędzi AI (w wersji beta) i może zawierać błędy. Aby wyświetlić tę stronę w języku angielskim, kliknij tutaj.

Studio daje Ci moc tworzenia niestandardowych widżetów i używania ich jako narzędzi i rozszerzeń. Te widżety działają jako niestandardowe okna/panele w Studio, a Ty możesz je zamocować w swoim interfejsie lub mieć jako osobne, pływające okna.

Tworzenie interfejsów widżetów

Wszystkie widżety Studio zaczynają jako obiekty DockWidgetPluginGui, które możesz wypełnić GuiObjects, takimi jak etykiety tekstowe i przyciski. Aby utworzyć pusty interfejs GUI widżetu, wywołaj funkcję CreateDockWidgetPluginGui(), przekazując ID i obiekt DockWidgetPluginGuiInfo.

Zauważ, że konstruktor DockWidgetPluginGuiInfo.new() oczekuje swoich parametrów w określonej kolejności jak poniżej:

#WłaściwośćTypOpis
1Enum.InitialDockStateEnumJedna z enumeracji Enum.InitialDockState.
2InitialEnabledBooleanPoczątkowy stan włączony (widoczny) interfejsu GUI widżetu.
3InitialEnabledShouldOverrideRestoreBooleanJeśli prawda, wartość InitialEnabled nadpisuje wcześniej zapisany stan włączenia.
4FloatingXSizeIntegerPoczątkowa szerokość GUI, gdy InitialDockState jest ustawione na Enum.InitialDockState.Float.
5FloatingYSizeIntegerPoczątkowa wysokość GUI, gdy InitialDockState jest ustawione na Enum.InitialDockState.Float.
6MinWidthIntegerMinimalna szerokość GUI, z pewnymi specyficznymi dla platformy wariacjami.
7MinHeightIntegerMinimalna wysokość GUI, z pewnymi specyficznymi dla platformy wariacjami.

-- Utwórz nowy obiekt "DockWidgetPluginGuiInfo"
local widgetInfo = DockWidgetPluginGuiInfo.new(
Enum.InitialDockState.Float, -- Widżet zostanie zainicjowany w pływającym panelu
true, -- Widżet będzie początkowo włączony
false, -- Nie nadpisuj poprzedniego stanu włączenia
200, -- Domyślna szerokość pływającego okna
300, -- Domyślna wysokość pływającego okna
150, -- Minimalna szerokość pływającego okna
150 -- Minimalna wysokość pływającego okna
)
-- Utwórz nowy interfejs GUI widżetu
local testWidget = plugin:CreateDockWidgetPluginGui("TestWidget", widgetInfo)
testWidget.Title = "Widżet testowy" -- Opcjonalny tytuł widżetu

Dostosowywanie interfejsu widżetu

Gdy już stworzysz widżet, możesz dostosować jego interfejs użytkownika za pomocą GuiObjects, jak informacyjne TextLabels lub interaktywne ImageButtons. Na przykład, poniższy kod dodaje podstawowy TextButton do okna GUI:


-- Utwórz nowy interfejs GUI widżetu
local testWidget = plugin:CreateDockWidgetPluginGui("TestWidget", widgetInfo)
testWidget.Title = "Widżet testowy" -- Opcjonalny tytuł widżetu
local testButton = Instance.new("TextButton")
testButton.BorderSizePixel = 0
testButton.TextSize = 20
testButton.TextColor3 = Color3.new(1,0.2,0.4)
testButton.AnchorPoint = Vector2.new(0.5,0.5)
testButton.Size = UDim2.new(1,0,1,0)
testButton.Position = UDim2.new(0.5,0,0.5,0)
testButton.SizeConstraint = Enum.SizeConstraint.RelativeYY
testButton.Text = "Kliknij mnie"
testButton.Parent = testWidget

Zmień motywy kolorystyczne Studio

Skuteczne widżety Studio idealnie pasują do ustawienia motywu Studio i dynamicznie dostosowują się, gdy motyw się zmienia. Na przykład, jeśli deweloper korzysta z ciemnego motywu, kolor tła widżetu, obrazy i etykiety tekstowe powinny dobrze wyglądać w połączeniu z kolorami natywnymi motywu Studio.

Poniższy dodatek kodu wykorzystuje funkcję syncGuiColors(), która jest początkowo wywoływana wraz z tabelą obiektów GUI do synchronizacji. Wewnątrz funkcji zagnieżdżona funkcja setColors() przechodzi przez obiekty i synchronizuje konkretne aspekty za pomocą GetColor() z enumeracjami Enum.StudioStyleGuideColor. Funkcja setColors() jest natychmiast uruchamiana, aby zsynchronizować motyw Studio, a potem jest połączona z zdarzeniem ThemeChanged, aby wykryć przyszłe zmiany motywu.


testButton.Parent = testWidget
local function syncGuiColors(objects)
local function setColors()
for _, guiObject in objects do
-- Synchronizuj kolor tła
guiObject.BackgroundColor3 = settings().Studio.Theme:GetColor(Enum.StudioStyleGuideColor.MainBackground)
-- Synchronizuj kolor tekstu
guiObject.TextColor3 = settings().Studio.Theme:GetColor(Enum.StudioStyleGuideColor.MainText)
end
end
-- Uruchom funkcję 'setColors()', aby początkowo zsynchronizować kolory
setColors()
-- Połącz zdarzenie 'ThemeChanged' z funkcją 'setColors()'
settings().Studio.ThemeChanged:Connect(setColors)
end
-- Uruchom funkcję 'syncGuiColors()', aby zsynchronizować kolory podanych obiektów
syncGuiColors({testButton})

Dostosowywanie kursorów myszy

Aby poprawić przewidywaną interakcję z elementami widżetu, możesz ustawić systemowe kursory myszy dla zdarzeń GUI, takich jak MouseEnter i MouseLeave. Poniższy kod demonstruje, jak połączyć funkcję ze zdarzeniami MouseEnter i MouseLeave przycisku testButton, aby zmienić kursor myszy:


local function setCursor(cursorAsset)
plugin:GetMouse().Icon = cursorAsset
end
testButton.MouseEnter:Connect(function()
setCursor("rbxasset://SystemCursors/PointingHand")
end)
testButton.MouseLeave:Connect(function()
setCursor("")
end)

Odszukaj poniższą tabelę, aby zobaczyć listę kursorów myszy i ich potencjalne zastosowania:

Ikona kursora myszyAssetZastosowanie
rbxasset://SystemCursors/ArrowDomyślne kliknięcie i wybór.
rbxasset://SystemCursors/PointingHandNajeżdżając na aktywny link/przycisk.
rbxasset://SystemCursors/OpenHandNajeżdżając na przeciągalny element.
rbxasset://SystemCursors/ClosedHandPrzeciągając element.
rbxasset://SystemCursors/IBeamNajeżdżając na pole tekstowe.
rbxasset://SystemCursors/SizeNSNajeżdżając na uchwyt zmiany rozmiaru w pionie.
rbxasset://SystemCursors/SizeEWNajeżdżając na uchwyt zmiany rozmiaru w poziomie.
rbxasset://SystemCursors/SizeNESWNajeżdżając na uchwyt zmiany rozmiaru w kąt.
rbxasset://SystemCursors/SizeNWSENajeżdżając na uchwyt zmiany rozmiaru w kąt.
rbxasset://SystemCursors/SizeAllNajeżdżając na uchwyt wielokierunkowej zmiany rozmiaru.
rbxasset://SystemCursors/SplitNSNajeżdżając na pionowy uchwyt "podziału".
rbxasset://SystemCursors/SplitEWNajeżdżając na poziomy uchwyt "podziału".
rbxasset://SystemCursors/ForbiddenNajeżdżając na zablokowany/zabroniony element.
rbxasset://SystemCursors/WaitWskazując, że akcja jest w toku.
rbxasset://SystemCursors/BusyWskazując, że system jest zajęty.
rbxasset://SystemCursors/CrossNajeżdżając na obszar precyzyjnego wyboru.

Zbieranie danych od użytkownika

Elementy UI, takie jak TextBox i TextButton, działają normalnie w widżetach Studio i możesz budować interfejsy tak, jak zazwyczaj w Roblox. Jednak UserInputService nie działa, ponieważ te usługi oczekują, że główne okno doświadczenia będzie w fokusu.

Jednym z obejść dla ogólnych zdarzeń wejściowych jest stworzenie przezroczystego Frame i nałożenie go na cały ekran. Poniższy przykład kodu tworzy ramkę, a gdy użytkownik kliknie na ramkę, zdarzenie GuiObject.InputBegan przechwytuje dane wejściowe z klawiatury na ramce, aż użytkownik kliknie gdzie indziej:


local frame = Instance.new("Frame")
frame.BackgroundTransparency = 1 -- Ukryj ramkę
frame.Size = UDim2.new(1, 0, 1, 0) -- Zakrywa ekran
frame.Position = UDim2.new(0, 0, 0, 0)
frame.Parent = testWidget
local function onInputBegan(inputObject)
-- Przetwórz obiekt wejściowy tutaj, na przykład rozpoznaj naciśnięcia klawiszy
end
frame.InputBegan:Connect(onInputBegan)

Interakcja przeciągnij-i-upuść

Użycie interakcji przeciągnij-i-upuść w widżetach to prosty sposób na poprawę przepływu danych. Aby utworzyć tę interakcję, musisz zdefiniować element do przeciągnięcia, zainicjować przeciągnięcie, stworzyć cel upuszczenia i przetworzyć akcję upuszczenia.

Utwórz źródło przeciągania

Możesz rozpocząć akcję przeciągania, wywołując Plugin:StartDrag(), gdy użytkownik naciśnie przycisk myszy na jakimś elemencie UI, typowo TextButton lub ImageButton w widżecie. Poniższy przykład kodu tworzy pojedynczy widżet okienny z przyciskiem tekstowym w środku.


-- Najpierw utwórz widżet
local widgetInfo = DockWidgetPluginGuiInfo.new(Enum.InitialDockState.Float, true, true, 300, 200)
local dragSourceWidget = plugin:CreateDockWidgetPluginGui("Źródło przeciągania", widgetInfo)
dragSourceWidget.Title = "Źródło przeciągania"
-- Utwórz TextButton, który zainicjuje przeciąganie
local dragButton = Instance.new("TextButton")
dragButton.Size = UDim2.new(1, 0, 1, 0)
dragButton.Text = "Przeciągnij mnie!"
dragButton.Parent = dragSourceWidget

Zainicjuj przeciąganie

Gdy użytkownik kliknie na TextButton, możesz zainicjować przeciąganie przez zdarzenie MouseButton1Down(), które wyzwala się, gdy użytkownik naciśnie przycisk myszy.

W podłączonej funkcji określ dane do przeciągnięcia. Typ danych powinien być odzwierciedlony w kluczu MimeType, zawartość przeciągania powinna być odzwierciedlona w kluczu Data, a nadawca powinien opisać siebie w kluczu Sender. Zobacz stronę Plugin:StartDrag() po więcej szczegółów.


local function onButton1Down()
local dragInfo = {
Data = "Witaj, świecie", -- Dane są przeciągane
MimeType = "text/plain", -- Opisuje typ MIME danych
Sender = "SomeDragSource", -- Opisuje z jakiego miejsca pochodzą dane
MouseIcon = "", -- Zawartość obrazu używana dla kursora
DragIcon = "", -- Zawartość obrazu renderowana pod kursorem podczas przeciągania
HotSpot = Vector2.zero -- Gdzie na DragIcon ma być wyśrodkowany kursor
}
plugin:StartDrag(dragInfo)
end
dragButton.MouseButton1Down:Connect(onButton1Down)

Utwórz cel upuszczania

Zdarzenie PluginGui.PluginDragDropped wyzwala się, gdy użytkownik zwolni mysz na oknie podczas przeciągania. Gdy to nastąpi, musisz zdefiniować cel upuszczenia, taki jak drugi widżet z TextLabel, aby wykryć drops.


local dragTargetWidget = plugin:CreateDockWidgetPluginGui("Cel upuszczania", widgetInfo)
dragTargetWidget.Title = "Cel upuszczania"
-- Ta TextLabel wyświetli, co zostało upuszczone
local textLabel = Instance.new("TextLabel")
textLabel.Size = UDim2.new(1, 0, 1, 0)
textLabel.Text = "Upuść tutaj..."
textLabel.Parent = dragTargetWidget

Przetwórz akcję upuszczenia

Po utworzeniu celu upuszczania, połącz zdarzenie PluginGui.PluginDragDropped na widżecie celu upuszczania:


local function onDragDrop(dragData)
print("PluginDragDropped")
if dragData.MimeType == "text/plain" then
textLabel.Text = dragData.Data
else
textLabel.Text = dragData.MimeType
end
end
dragTargetWidget.PluginDragDropped:Connect(onDragDrop)

Podczas gdy przeciąganie wciąż trwa, te trzy zdarzenia wyzwalają się, gdy użytkownik przesuwa mysz nad widżetem:

  • PluginDragEntered – wyzwala się, gdy użytkownik najeżdża myszą na okno
  • PluginDragMoved – wyzwala się wielokrotnie, gdy użytkownik przesuwa myszą nad oknem. Jest to przydatne do pokazywania wiadomości "Upuść tutaj!".
  • PluginDragLeft – wyzwala się, gdy kursor użytkownika opuszcza okno. Jest to przydatne do ukrywania wiadomości "Upuść tutaj!".
©2026 Roblox Corporation. Nazwa Roblox, logo Roblox oraz hasło „Powering Imagination” należą do naszych zarejestrowanych i niezarejestrowanych znaków towarowych na terenie Stanów Zjednoczonych oraz w innych krajach.