前言

最近有在用Unity做前端UI， 用到了实现表格数据渲染，也就是后台给的list渲染到表格中，查看了许多资料发现比较少，因此在这里记录一下吧，希望可以帮助到大家哦。

也是第一次使用Unity，先简单介绍一下，Unity是一款经常用来做3d图像的框架，很多游戏都有用到Unity，比如小编最近在玩的“爸爸的面馆”就是有用到这个框架，以后如果有尝试3D的demo再分享给大家吧。

正文

小编尝试了两种方式，但是实际来说，第二种方式更好一些。

方案1：使用scrollview控件结合string形式的数据展示

• 创建项目
• 创建UI-scrollview
• 在scrollview中的content中添加text控件
• 创建script脚本，将脚本放到scrollview的inspector下，直接拖动过去就好
• 拖动过去之后，将刚才添加的text控件绑定到scrollview的inspector的script下的text上

代码如下：

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;

public class NewBehaviourScript1 : MonoBehaviour
{
    
	//content下的text控件名称
     public Text tableText;
     //定义要放到表格中的数据
     private string[,] tableData;
  
    // Start is called before the first frame update
    void Start()
    {
    
          tableData=new string[,]{
    
          {
    "intamnet     ","Connected","wifi"},
     	  {
    "ChenL        ","","wifi"},
     	  {
    "tatatnet      ","","wifi"},
          {
    "internet","","wifi"},
          {
    "ChenL","","wifi"},
          {
    "internet","","wifi"},
          {
    "ChenL","","wifi"},
          {
    "hidtwor","","wifi"},
          {
    "internet     ","","wifi"},
          {
    "ChenL        ","","wifi"},
          {
    "internet     ","","wifi"},
          {
    "Ch4nL        ","","wifi"},
          {
    "internet     ","","wifi"},
     	  {
    "Ch6nL        ","","wifi"}
       };
       UpdatDataText();
    }
    
    void UpdatDataText(){
    
    	RectTransform contentTransform =GetComponentInChildren<ScrollRect>().content;
    	string dataStr="";
    	for(int i =0;i<tableData.GetLength(0);i++){
    
    		for(int j =0;j<tableData.GetLength(1);j++){
    
    			dataStr+=tableData[i,j].PadRight(20);
    		}
    		dataStr+="\n";
    	}
    	tableText.text=dataStr;
    	
    	//当数据超过scrollview的size时可以滑动滚轮显示数据
    	contentTransform.sizeDelta=new Vector2(tableText.preferredWidth,tableText.preferredHeight);
    	tableText.text=dataStr;
    	 
    	
   }
}

这个方案的显示效果：

这个方案算是就字符串模拟表格的结果，但是有些问题就是每一列的数据如果字符串长度不是一般长，导致数据就不会整齐，因此有了方案2.

方案2：使用scrollview结合grid layout group控件调整布局展示表格数据。

• 创建GameObject
• GameObject下创建panel
• panel下创建一个scrollview
• scrollview下的content下创建一个gameObject命名为CellPrefab
• CellPrefab下创建想要的列，我创建了3列，第一列text，第二列text，第三列image
• CellPrefab下，add component-grid layout group
• 将CellPrefab拖到Assets下，这样CellPrefab就变成了一个预制体
• 通过代码实现，将数据放到预制体，构成表格

代码如下：

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;

public class table1 : MonoBehaviour
{
    
    public GameObject CellPrefab;
    public Sprite[] icons;

    private List<List<string>> tableData = new List<List<string>>()
    {
    
       
        new List<string>{
    "Item 1", "10", "icon1"},
        new List<string>{
    "Item 2", "20", "icon2"},
        new List<string>{
    "Item 3", "30", "icon3"},
        new List<string>{
    "Item 4", "40", "icon4"},
        new List<string>{
    "Item 5", "50", "icon5"},
        new List<string>{
    "Item 6", "60", "icon6"},
        new List<string>{
    "Item 7", "70", "icon7"},
        new List<string>{
    "Item 8", "80", "icon8"},
    };

    void Start()
    {
    
        icons = Resources.LoadAll<Sprite>("Icons");
        if (icons == null || icons.Length == 0)
        {
    
            Debug.LogError("No icons loaded!");
        }
        else
        {
    
            Debug.Log("Number of icons loaded: " + icons.Length);
        }
        Debug.Log("icons__________"+icons);
        PopulateTable();
    }

    void PopulateTable()
    {
    
      

        GridLayoutGroup gridLayout = GetComponentInChildren<GridLayoutGroup>();
        foreach (var row in tableData)
        {
    
            GameObject cell = Instantiate(CellPrefab);
            Text[] cellTexts = cell.GetComponentsInChildren<Text>();

            for (int i = 0; i < 3; i++)
            {
    
                if (i == 2)
                {
    
                   Image iconImage = cell.GetComponentInChildren<Image>();
                    //int iconIndex = int.Parse(row[i].Substring(4));


                    //if (iconIndex < 0 || iconIndex >= icons.Length)
                    // {
    
                    //   Debug.LogError("Icon index out of bounds!");
                    //  return;
                    // }
                   // Debug.Log("iconIndex==="+iconIndex);
                    iconImage.sprite = icons[2];
                }
                else
                {
    
                    cellTexts[i].text = row[i];
                }
            }
            // Set the new cell as a child of the GridLayoutGroup
            cell.transform.SetParent(gridLayout.transform, false);
        }
    }
}

方案2效果如图：

可以看到比较整齐了，这个添加了一个按钮，为点击每一行的数据跳转做准备。

后记

因为第一次使用Unity，而且是在linux下，使用起来不是很熟，每一个控件，还有表格的数据渲染，图标的显示，每一步都不太顺畅，只能说多多积累经验吧，新学习了一个框架也是不错的体验。后续有新的功能使用会再做分享~(^▽)