UITableLayout

Hiển Thị Bản Đã Lỗi Thời

*Nội dung này được dịch bằng AI (Beta) và có thể có lỗi. Để xem trang này bằng tiếng Anh, hãy nhấp vào đây.

Một UITableLayout sắp xếp các thành phần UI của anh em như các hàng trong một bảng.Các yếu tố UI con (các ô bảng) của các hàng này sau đó được sắp xếp theo cột (trong các hàng).Mỗi cell trong một hàng có chiều cao giống nhau, và mỗi cell trong một cột có chiều rộng giống nhau.

Bằng cách thay đổi UIGridStyleLayout.FillDirection, các thành phần UI của anh em có thể hành động như cột thay vì.

Khi được áp dụng, một UITableLayout sẽ kiểm soát các thành phần anh em và tế bào của GuiObject.Size và GuiObject.Position .Thay đổi chúng trong cửa sổ Thuộc tính vẫn có thể không sản xuất bất kỳ hiệu ứng nào.

Kích thước của các tế bào trong bảng kết quả được kiểm soát bởi kích thước của thành phần UI cha.Trừ khi UITableLayout.FillEmptySpaceColumns hoặc UITableLayout.FillEmptySpaceRows được bật, kích thước của tế bào sẽ là của thành phần UI cha (và do đó các bảng có nhiều hơn một tế bào mở rộng bên ngoài của cha của chúng).

Các tế bào sẽ tiếp tục tôn trọng UISizeConstraint đối tượng bên trong chúng.Nói cách khác, việc đặt UISizeConstraint.MinSize trong UISizeConstraints bên trong các tế bào tiêu đề có thể xác định kích thước của phần còn lại của các tế bào.Nếu UISizeConstraint.MaxSize giới hạn kích thước của một tế bào từ việc lấp đầy không gian dành cho nó (tức làmột hàng/cột khác rộng hơn nó), nó sẽ được căn chỉnh lên bên trái trên cùng.

Mẫu mã

This code sample builds a table of 4 rows, the first having headers. It does this using some for-loops and a UITableLayout. The widths of each column are set using UISizeConstraints.

Build UI Table
local frame = script.Parent



-- Table data

local headerWidth = { 200, 80, 80 }

local headers = {

	"Name",

	"Job",

	"Cash",

}

local data = {

	{ "Bob", "Waiter", 100 },

	{ "Lisa", "Police", 200 },

	{ "George", "-", 50 },

}



-- First, build the table layout

local uiTableLayout = Instance.new("UITableLayout")

uiTableLayout.FillDirection = Enum.FillDirection.Vertical

uiTableLayout.HorizontalAlignment = Enum.HorizontalAlignment.Center

uiTableLayout.VerticalAlignment = Enum.VerticalAlignment.Center

uiTableLayout.FillEmptySpaceColumns = false

uiTableLayout.FillEmptySpaceRows = false

uiTableLayout.Padding = UDim2.new(0, 5, 0, 5)

uiTableLayout.SortOrder = Enum.SortOrder.LayoutOrder

frame.Size = UDim2.new(0, 0, 0, 40) -- The Size of the parent frame is the cell size

uiTableLayout.Parent = frame



-- Next, create column headers

local headerFrame = Instance.new("Frame")

headerFrame.Name = "Headers"

headerFrame.Parent = frame

for i = 1, #headers do

	local headerText = headers[i]

	local headerCell = Instance.new("TextLabel")

	headerCell.Text = headerText

	headerCell.Name = headerText

	headerCell.LayoutOrder = i

	headerCell.Size = UDim2.new(0, 0, 0, 24)

	headerCell.Parent = headerFrame

	local headerSize = Instance.new("UISizeConstraint")

	headerSize.MinSize = Vector2.new(headerWidth[i], 0)

	headerSize.Parent = headerCell

end



-- Finally, add data rows by iterating over each row and the columns in that row

for index, value in ipairs(data) do

	local rowData = value

	local rowFrame = Instance.new("Frame")

	rowFrame.Name = "Row" .. index

	rowFrame.Parent = frame

	for col = 1, #value do

		local cellData = rowData[col]

		local cell = Instance.new("TextLabel")

		cell.Text = cellData

		cell.Name = headers[col]

		cell.TextXAlignment = Enum.TextXAlignment.Left

		if tonumber(cellData) then -- If this cell is a number, right-align it instead

			cell.TextXAlignment = Enum.TextXAlignment.Right

		end

		cell.ClipsDescendants = true

		cell.Size = UDim2.new(0, 0, 0, 24)

		cell.Parent = rowFrame

	end

end

Tóm Tắt

Thuộc Tính

  • FillEmptySpaceColumns:boolean
    Đọc Song Song

    Xác định xem các tế bào có kích thước như vậy để chiếm không gian ngang của thành phần UI cha hay không.

  • FillEmptySpaceRows:boolean
    Đọc Song Song

    Xác định xem các tế bào có kích thước như vậy để chiếm không gian dọc của thành phần UI cha hay không.

  • MajorAxis:Enum.TableMajorAxis
    Đọc Song Song

    Xác định xem các thành phần UI của anh em được xử lý như hàng hoặc cột.

  • Padding:UDim2
    Đọc Song Song

    Xác định không gian trống giữa các tế bào.

Thuộc Tính kế thừa từ UIGridStyleLayout
Xem tất cả các mục kế thừa từ Instance
Xem tất cả các mục kế thừa từ Object

Thuộc Tính

FillEmptySpaceColumns

boolean
Đọc Song Song

FillEmptySpaceColumns xác định xem kích thước X của các ô trống được đặt thành như vậy để toàn bộ không gian ngang của thành phần UI cha được sử dụng.Bật nó sẽ hữu ích để đảm bảo bảng của bạn chiếm một lượng không gian ngang dễ dàng dự đoán hơn (kích thước trục X của thành phần UI cha).Vẫn có khả năng một UISizeConstraint áp dụng cho các tế bào sẽ gây ra dư thừa/thiếu hụt.

Khi bật tính năng này, chiều rộng của các cột sẽ khoảng bằng với thành phần GuiBase2d.AbsoluteSize .X của cha mẹ chia cho số cột (không tính đến khoảng trống hoặc các yếu tố khác).

Mẫu mã

This code sample builds a table of 4 rows, the first having headers. It does this using some for-loops and a UITableLayout. The widths of each column are set using UISizeConstraints.

Build UI Table
local frame = script.Parent



-- Table data

local headerWidth = { 200, 80, 80 }

local headers = {

	"Name",

	"Job",

	"Cash",

}

local data = {

	{ "Bob", "Waiter", 100 },

	{ "Lisa", "Police", 200 },

	{ "George", "-", 50 },

}



-- First, build the table layout

local uiTableLayout = Instance.new("UITableLayout")

uiTableLayout.FillDirection = Enum.FillDirection.Vertical

uiTableLayout.HorizontalAlignment = Enum.HorizontalAlignment.Center

uiTableLayout.VerticalAlignment = Enum.VerticalAlignment.Center

uiTableLayout.FillEmptySpaceColumns = false

uiTableLayout.FillEmptySpaceRows = false

uiTableLayout.Padding = UDim2.new(0, 5, 0, 5)

uiTableLayout.SortOrder = Enum.SortOrder.LayoutOrder

frame.Size = UDim2.new(0, 0, 0, 40) -- The Size of the parent frame is the cell size

uiTableLayout.Parent = frame



-- Next, create column headers

local headerFrame = Instance.new("Frame")

headerFrame.Name = "Headers"

headerFrame.Parent = frame

for i = 1, #headers do

	local headerText = headers[i]

	local headerCell = Instance.new("TextLabel")

	headerCell.Text = headerText

	headerCell.Name = headerText

	headerCell.LayoutOrder = i

	headerCell.Size = UDim2.new(0, 0, 0, 24)

	headerCell.Parent = headerFrame

	local headerSize = Instance.new("UISizeConstraint")

	headerSize.MinSize = Vector2.new(headerWidth[i], 0)

	headerSize.Parent = headerCell

end



-- Finally, add data rows by iterating over each row and the columns in that row

for index, value in ipairs(data) do

	local rowData = value

	local rowFrame = Instance.new("Frame")

	rowFrame.Name = "Row" .. index

	rowFrame.Parent = frame

	for col = 1, #value do

		local cellData = rowData[col]

		local cell = Instance.new("TextLabel")

		cell.Text = cellData

		cell.Name = headers[col]

		cell.TextXAlignment = Enum.TextXAlignment.Left

		if tonumber(cellData) then -- If this cell is a number, right-align it instead

			cell.TextXAlignment = Enum.TextXAlignment.Right

		end

		cell.ClipsDescendants = true

		cell.Size = UDim2.new(0, 0, 0, 24)

		cell.Parent = rowFrame

	end

end

FillEmptySpaceRows

boolean
Đọc Song Song

Điền vào các hàng trống xác định xem kích thước Y của các tế bào được đặt thành như vậy mà toàn bộ không gian ngang của thành phần UI cha được sử dụng.Bật nó sẽ hữu ích để đảm bảo bảng của bạn chiếm một lượng không gian dọc dễ dàng dự đoán hơn (kích thước trục Y của thành phần UI cha).Vẫn có khả năng một UISizeConstraint áp dụng cho các tế bào sẽ gây ra dư thừa/thiếu hụt.

Khi bật chức năng này, chiều cao của các hàng sẽ khoảng bằng với thành phần GuiBase2d.AbsoluteSize của cha (không tính đến khoảng trống hoặc các yếu tố khác).

Mẫu mã

This code sample builds a table of 4 rows, the first having headers. It does this using some for-loops and a UITableLayout. The widths of each column are set using UISizeConstraints.

Build UI Table
local frame = script.Parent



-- Table data

local headerWidth = { 200, 80, 80 }

local headers = {

	"Name",

	"Job",

	"Cash",

}

local data = {

	{ "Bob", "Waiter", 100 },

	{ "Lisa", "Police", 200 },

	{ "George", "-", 50 },

}



-- First, build the table layout

local uiTableLayout = Instance.new("UITableLayout")

uiTableLayout.FillDirection = Enum.FillDirection.Vertical

uiTableLayout.HorizontalAlignment = Enum.HorizontalAlignment.Center

uiTableLayout.VerticalAlignment = Enum.VerticalAlignment.Center

uiTableLayout.FillEmptySpaceColumns = false

uiTableLayout.FillEmptySpaceRows = false

uiTableLayout.Padding = UDim2.new(0, 5, 0, 5)

uiTableLayout.SortOrder = Enum.SortOrder.LayoutOrder

frame.Size = UDim2.new(0, 0, 0, 40) -- The Size of the parent frame is the cell size

uiTableLayout.Parent = frame



-- Next, create column headers

local headerFrame = Instance.new("Frame")

headerFrame.Name = "Headers"

headerFrame.Parent = frame

for i = 1, #headers do

	local headerText = headers[i]

	local headerCell = Instance.new("TextLabel")

	headerCell.Text = headerText

	headerCell.Name = headerText

	headerCell.LayoutOrder = i

	headerCell.Size = UDim2.new(0, 0, 0, 24)

	headerCell.Parent = headerFrame

	local headerSize = Instance.new("UISizeConstraint")

	headerSize.MinSize = Vector2.new(headerWidth[i], 0)

	headerSize.Parent = headerCell

end



-- Finally, add data rows by iterating over each row and the columns in that row

for index, value in ipairs(data) do

	local rowData = value

	local rowFrame = Instance.new("Frame")

	rowFrame.Name = "Row" .. index

	rowFrame.Parent = frame

	for col = 1, #value do

		local cellData = rowData[col]

		local cell = Instance.new("TextLabel")

		cell.Text = cellData

		cell.Name = headers[col]

		cell.TextXAlignment = Enum.TextXAlignment.Left

		if tonumber(cellData) then -- If this cell is a number, right-align it instead

			cell.TextXAlignment = Enum.TextXAlignment.Right

		end

		cell.ClipsDescendants = true

		cell.Size = UDim2.new(0, 0, 0, 24)

		cell.Parent = rowFrame

	end

end

MajorAxis

Enum.TableMajorAxis
Đọc Song Song

MajorAxis xác định xem các thành phần UI của anh em được xử lý như hàng hoặc cột.

Mẫu mã

This code sample builds a table of 4 rows, the first having headers. It does this using some for-loops and a UITableLayout. The widths of each column are set using UISizeConstraints.

Build UI Table
local frame = script.Parent



-- Table data

local headerWidth = { 200, 80, 80 }

local headers = {

	"Name",

	"Job",

	"Cash",

}

local data = {

	{ "Bob", "Waiter", 100 },

	{ "Lisa", "Police", 200 },

	{ "George", "-", 50 },

}



-- First, build the table layout

local uiTableLayout = Instance.new("UITableLayout")

uiTableLayout.FillDirection = Enum.FillDirection.Vertical

uiTableLayout.HorizontalAlignment = Enum.HorizontalAlignment.Center

uiTableLayout.VerticalAlignment = Enum.VerticalAlignment.Center

uiTableLayout.FillEmptySpaceColumns = false

uiTableLayout.FillEmptySpaceRows = false

uiTableLayout.Padding = UDim2.new(0, 5, 0, 5)

uiTableLayout.SortOrder = Enum.SortOrder.LayoutOrder

frame.Size = UDim2.new(0, 0, 0, 40) -- The Size of the parent frame is the cell size

uiTableLayout.Parent = frame



-- Next, create column headers

local headerFrame = Instance.new("Frame")

headerFrame.Name = "Headers"

headerFrame.Parent = frame

for i = 1, #headers do

	local headerText = headers[i]

	local headerCell = Instance.new("TextLabel")

	headerCell.Text = headerText

	headerCell.Name = headerText

	headerCell.LayoutOrder = i

	headerCell.Size = UDim2.new(0, 0, 0, 24)

	headerCell.Parent = headerFrame

	local headerSize = Instance.new("UISizeConstraint")

	headerSize.MinSize = Vector2.new(headerWidth[i], 0)

	headerSize.Parent = headerCell

end



-- Finally, add data rows by iterating over each row and the columns in that row

for index, value in ipairs(data) do

	local rowData = value

	local rowFrame = Instance.new("Frame")

	rowFrame.Name = "Row" .. index

	rowFrame.Parent = frame

	for col = 1, #value do

		local cellData = rowData[col]

		local cell = Instance.new("TextLabel")

		cell.Text = cellData

		cell.Name = headers[col]

		cell.TextXAlignment = Enum.TextXAlignment.Left

		if tonumber(cellData) then -- If this cell is a number, right-align it instead

			cell.TextXAlignment = Enum.TextXAlignment.Right

		end

		cell.ClipsDescendants = true

		cell.Size = UDim2.new(0, 0, 0, 24)

		cell.Parent = rowFrame

	end

end

Padding

UDim2
Đọc Song Song

Lót sẽ đặt các thành phần với không gian dư thừa giữa chúng.Điều này có thể được thực hiện bằng cách sử dụng các thành phần Scale hoặc Offset của UDim2.Các giá trị tiêu cực có thể mang các yếu tố lại gần nhau hơn.Khi không bằng không, các thành phần UI của anh em có thể hiển thị giữa các tế bào bên trong chúng.

Mẫu mã

This code sample builds a table of 4 rows, the first having headers. It does this using some for-loops and a UITableLayout. The widths of each column are set using UISizeConstraints.

Build UI Table
local frame = script.Parent



-- Table data

local headerWidth = { 200, 80, 80 }

local headers = {

	"Name",

	"Job",

	"Cash",

}

local data = {

	{ "Bob", "Waiter", 100 },

	{ "Lisa", "Police", 200 },

	{ "George", "-", 50 },

}



-- First, build the table layout

local uiTableLayout = Instance.new("UITableLayout")

uiTableLayout.FillDirection = Enum.FillDirection.Vertical

uiTableLayout.HorizontalAlignment = Enum.HorizontalAlignment.Center

uiTableLayout.VerticalAlignment = Enum.VerticalAlignment.Center

uiTableLayout.FillEmptySpaceColumns = false

uiTableLayout.FillEmptySpaceRows = false

uiTableLayout.Padding = UDim2.new(0, 5, 0, 5)

uiTableLayout.SortOrder = Enum.SortOrder.LayoutOrder

frame.Size = UDim2.new(0, 0, 0, 40) -- The Size of the parent frame is the cell size

uiTableLayout.Parent = frame



-- Next, create column headers

local headerFrame = Instance.new("Frame")

headerFrame.Name = "Headers"

headerFrame.Parent = frame

for i = 1, #headers do

	local headerText = headers[i]

	local headerCell = Instance.new("TextLabel")

	headerCell.Text = headerText

	headerCell.Name = headerText

	headerCell.LayoutOrder = i

	headerCell.Size = UDim2.new(0, 0, 0, 24)

	headerCell.Parent = headerFrame

	local headerSize = Instance.new("UISizeConstraint")

	headerSize.MinSize = Vector2.new(headerWidth[i], 0)

	headerSize.Parent = headerCell

end



-- Finally, add data rows by iterating over each row and the columns in that row

for index, value in ipairs(data) do

	local rowData = value

	local rowFrame = Instance.new("Frame")

	rowFrame.Name = "Row" .. index

	rowFrame.Parent = frame

	for col = 1, #value do

		local cellData = rowData[col]

		local cell = Instance.new("TextLabel")

		cell.Text = cellData

		cell.Name = headers[col]

		cell.TextXAlignment = Enum.TextXAlignment.Left

		if tonumber(cellData) then -- If this cell is a number, right-align it instead

			cell.TextXAlignment = Enum.TextXAlignment.Right

		end

		cell.ClipsDescendants = true

		cell.Size = UDim2.new(0, 0, 0, 24)

		cell.Parent = rowFrame

	end

end
Xem tất cả các mục kế thừa từ Instance
Xem tất cả các mục kế thừa từ Object

Phương Pháp

Xem tất cả các mục kế thừa từ Instance
Xem tất cả các mục kế thừa từ Object

Sự Kiện

Xem tất cả các mục kế thừa từ Instance
Xem tất cả các mục kế thừa từ Object