Android Studio中Kotlin实现Fragment图片点击跳转至另一Fragment

前提准备 #

首先需要在你的导航图文件（res/navigation/nav_graph.xml）中添加Frag2的目的地节点，让Navigation组件能识别并处理跳转：

<fragment
    android:id="@+id/frag2"
    android:name="com.example.landingpages.Frag2"
    android:label="Frag2" />

HomeFragment.kt 修正代码 #

package com.example.landingpages.ui.home

import android.os.Bundle
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import android.widget.TextView
import androidx.fragment.app.Fragment
import androidx.lifecycle.ViewModelProvider
import androidx.navigation.fragment.findNavController
import com.example.landingpages.R
import com.example.landingpages.databinding.FragmentHomeBinding

class HomeFragment : Fragment() {

    private var _binding: FragmentHomeBinding? = null
    private val binding get() = _binding!!

    override fun onCreateView(
        inflater: LayoutInflater,
        container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View {
        val homeViewModel = ViewModelProvider(this).get(HomeViewModel::class.java)

        _binding = FragmentHomeBinding.inflate(inflater, container, false)
        val root: View = binding.root

        // 绑定目标ImageView并设置点击事件
        binding.imageView3.setOnClickListener {
            // 使用Navigation组件跳转到Frag2
            findNavController().navigate(R.id.frag2)
        }

        val textView: TextView = binding.textView
        homeViewModel.text.observe(viewLifecycleOwner) {
            // 可在此添加文本更新逻辑，比如 textView.text = it
        }
        return root
    }

    override fun onDestroyView() {
        super.onDestroyView()
        _binding = null
    }
}

修改说明 #

• 移除错误的Intent跳转逻辑：Fragment之间跳转需用Navigation组件，不能用启动Activity的方式
• 修正ImageView获取方式：通过View Binding直接获取imageView3（原代码错误地用findNavController查找View，且目标控件ID写错）
• 简化冗余代码，保留核心逻辑

Frag2.kt 修正代码 #

package com.example.landingpages

import android.os.Bundle
import androidx.fragment.app.Fragment
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import com.example.landingpages.databinding.FragmentIplAuctionBinding

private const val ARG_PARAM1 = "param1"
private const val ARG_PARAM2 = "param2"

class Frag2 : Fragment() {
    private var param1: String? = null
    private var param2: String? = null
    private lateinit var binding: FragmentIplAuctionBinding

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        arguments?.let {
            param1 = it.getString(ARG_PARAM1)
            param2 = it.getString(ARG_PARAM2)
        }
    }

    override fun onCreateView(
        inflater: LayoutInflater, container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View {
        // 正确初始化View Binding
        binding = FragmentIplAuctionBinding.inflate(inflater, container, false)
        // 可在此添加Frag2的初始化逻辑
        return binding.root
    }
}

修改说明 #

• 修正View Binding初始化位置：需在onCreateView中完成，避免布局重复加载
• 返回binding.root而非直接返回inflate的布局，符合View Binding最佳实践

MainActivity.kt 修正代码 #

package com.example.landingpages

import android.os.Bundle
import com.google.android.material.bottomnavigation.BottomNavigationView
import androidx.appcompat.app.AppCompatActivity
import androidx.navigation.findNavController
import androidx.navigation.ui.AppBarConfiguration
import androidx.navigation.ui.setupActionBarWithNavController
import androidx.navigation.ui.setupWithNavController
import com.example.landingpages.databinding.ActivityMainBinding

class MainActivity : AppCompatActivity() {

    private lateinit var binding: ActivityMainBinding

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        binding = ActivityMainBinding.inflate(layoutInflater)
        setContentView(binding.root)

        val navView: BottomNavigationView = binding.navView

        val navController = findNavController(R.id.nav_host_fragment_activity_main)
        // 无需将Frag2加入底部导航集合，跳转后ActionBar会自动显示返回按钮
        val appBarConfiguration = AppBarConfiguration(
            setOf(
                R.id.navigation_home, R.id.navigation_matches, R.id.navigation_profile
            )
        )
        setupActionBarWithNavController(navController, appBarConfiguration)
        navView.setupWithNavController(navController)
    }
}

修改说明 #

• 无需大幅改动原有逻辑，保持底部导航配置即可，Navigation组件会自动处理Frag2的返回逻辑

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