Flutter中通过返回按钮切换Column组件的可见性

需求说明 #

初始状态：

• Column1 可见（Visible=true）
• Column2 不可见（Visible=false）

按下系统返回按钮后：

• Column1 不可见（Visible=false）
• Column2 可见（Visible=true）

Flutter 实现方案 #

通过WillPopScope组件拦截返回按钮事件，切换列的可见状态：

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: const ColumnVisibilityToggle(),
    );
  }
}

class ColumnVisibilityToggle extends StatefulWidget {
  const ColumnVisibilityToggle({super.key});

  @override
  State<ColumnVisibilityToggle> createState() => _ColumnVisibilityToggleState();
}

class _ColumnVisibilityToggleState extends State<ColumnVisibilityToggle> {
  bool isColumn1Visible = true;
  bool isColumn2Visible = false;

  @override
  Widget build(BuildContext context) {
    return WillPopScope(
      onWillPop: () async {
        setState(() {
          isColumn1Visible = !isColumn1Visible;
          isColumn2Visible = !isColumn2Visible;
        });
        return false; // 阻止默认页面退出行为
      },
      child: Scaffold(
        appBar: AppBar(title: const Text('切换列可见性')),
        body: Padding(
          padding: const EdgeInsets.all(16.0),
          child: Column(
            children: [
              Visibility(
                visible: isColumn1Visible,
                child: Container(
                  width: double.infinity,
                  height: 150,
                  color: Colors.blue,
                  alignment: Alignment.center,
                  child: const Text('Column1', style: TextStyle(color: Colors.white, fontSize: 20)),
                ),
              ),
              const SizedBox(height: 16),
              Visibility(
                visible: isColumn2Visible,
                child: Container(
                  width: double.infinity,
                  height: 150,
                  color: Colors.green,
                  alignment: Alignment.center,
                  child: const Text('Column2', style: TextStyle(color: Colors.white, fontSize: 20)),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

核心逻辑

1. 用WillPopScope包裹页面内容，拦截系统返回按钮的默认行为
2. 在onWillPop回调中通过setState切换两个列的可见状态
3. 返回false只执行状态切换，不触发页面退出
4. 借助Visibility组件控制列的显示与隐藏

Android 原生（Kotlin）实现方案 #

通过监听返回按键事件，更新控件可见性：

代码实现

import android.os.Bundle
import android.view.KeyEvent
import android.view.View
import androidx.appcompat.app.AppCompatActivity
import kotlinx.android.synthetic.main.activity_main.*

class MainActivity : AppCompatActivity() {
    private var isColumn1Visible = true
    private var isColumn2Visible = false

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        updateColumnVisibility()
    }

    override fun onKeyDown(keyCode: Int, event: KeyEvent?): Boolean {
        if (keyCode == KeyEvent.KEYCODE_BACK) {
            isColumn1Visible = !isColumn1Visible
            isColumn2Visible = !isColumn2Visible
            updateColumnVisibility()
            return true // 阻止默认返回行为
        }
        return super.onKeyDown(keyCode, event)
    }

    private fun updateColumnVisibility() {
        column1.visibility = if (isColumn1Visible) View.VISIBLE else View.GONE
        column2.visibility = if (isColumn2Visible) View.VISIBLE else View.GONE
    }
}

布局文件（activity_main.xml）

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:padding="16dp">

    <View
        android:id="@+id/column1"
        android:layout_width="match_parent"
        android:layout_height="150dp"
        android:background="@color/blue" />

    <Space
        android:layout_width="match_parent"
        android:layout_height="16dp" />

    <View
        android:id="@+id/column2"
        android:layout_width="match_parent"
        android:layout_height="150dp"
        android:background="@color/green" />

</LinearLayout>

核心逻辑

1. 重写onKeyDown方法监听返回按键
2. 切换可见状态后，调用updateColumnVisibility更新控件显示状态
3. 返回true拦截默认的页面退出行为

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