Android开发：如何拆分洗衣机列表并在GridView中逐个展示？

你的核心问题是数据没有被正确拆分为单个列表项，同时适配器泛型存在错误，导致所有内容挤在一个GridView项里。以下是具体修正步骤：

1. 修正Fragment中的数据处理逻辑 #

原来的itemList把整个产品列表转成单个字符串存入数组，导致GridView仅显示1项（内容是整个列表的toString结果）。需要将产品列表拆分为单个元素的数组：

修改HomeFragment代码 #

class HomeFragment : Fragment() {

    private lateinit var binding: FragmentHomeBinding
    private val viewModel by KoinJavaComponent.inject(HomeFragmentVM::class.java)
    private val sp by inject<SPManager>()
    private var profile : Data? = null

    // 假设viewModel.products是List<String>类型，直接转成数组
    private val itemList: Array<String>
        get() = viewModel.products.toTypedArray()

    override fun onCreateView(
        inflater: LayoutInflater,
        container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View? {
        binding = FragmentHomeBinding.inflate(inflater, container, false)
        return binding.root
    }

    override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
        super.onViewCreated(view, savedInstanceState)
        viewModel.getWashingMachines()
        setupGridView()
        setObservers()
    }

    private fun setupGridView() {
        // 按需设置GridView列数，比如2列
        binding.gridview.numColumns = 2
        println(viewModel.products)
    }

    private fun setObservers() {
        viewModel.isCorrect.observe(viewLifecycleOwner) {
            if (it.isNotEmpty()){
                // 直接用拆分后的数组初始化适配器
                val adapter = ImageListAdapter(context!!, R.layout.list_item, itemList)
                binding.gridview.adapter = adapter
                binding.gridview.onItemClickListener =
                    AdapterView.OnItemClickListener { parent, v, position, id ->
                        println("you clicked ${viewModel.products[position]}")
                    }
                println("Not Failed")
            } else {
                println("Failed")
            }
        }
    }
}

2. 修正适配器的泛型错误 #

原适配器泛型误用ItemViewHolder，应该改为String（对应要显示的列表项类型）：

修改ImageListAdapter代码 #

internal class ImageListAdapter internal constructor(
    context: Context,
    private val resource: Int,
    private val itemList: Array<String>?
) : ArrayAdapter<String>(context, resource, itemList ?: emptyArray()) {

    private val inflater: LayoutInflater = LayoutInflater.from(context)

    override fun getCount(): Int {
        return itemList?.size ?: 0
    }

    override fun getView(position: Int, convertView: View?, parent: ViewGroup): View {
        val holder: ItemViewHolder
        var view = convertView

        if (view == null) {
            // 绑定布局时传入parent，确保布局参数生效
            val itemBinding = ListItemBinding.inflate(inflater, parent, false)
            view = itemBinding.root
            holder = ItemViewHolder().apply {
                name = itemBinding.textView
                icon = itemBinding.icon
            }
            view.tag = holder
        } else {
            holder = view.tag as ItemViewHolder
        }

        itemList?.let {
            holder.name?.text = it[position]
            holder.icon?.setImageResource(R.mipmap.ic_launcher)
        }

        return view!!
    }

    internal class ItemViewHolder {
        var name: TextView? = null
        var icon: ImageView? = null
    }
}

3. 优化列表项布局（list_item.xml） #

确保每个列表项有合适的内边距和外边距，避免视觉上挤在一起：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    android:padding="8dp"
    android:layout_margin="4dp"
    android:gravity="center">

    <ImageView
        android:id="@+id/icon"
        android:layout_width="60dp"
        android:layout_height="60dp"/>

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="4dp"
        android:textSize="14sp"/>

</LinearLayout>

内容的提问来源于stack exchange，提问作者Inveniuum