显示图像 A 或 B - Flutter

Question

如何在用户的屏幕上显示图像 A 如果它是假的，或者图像 B 如果它是真的，图像 A 是第一个出现的，当用户点击它时，状态变为真并切换到图像B、用户点击后切换，状态变为真或假。 图像 A = 假 图片 B = 真

图片 A - 图片 B

class _MyAppState extends State<MyApp> {

  bool closedImage = false;
  bool openImage = true;
  bool switchOn = false;

  void _onSwitchChanged(bool value) {
    setState(() {
      switchOn = false;
    });
  }


  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      theme: ThemeData(scaffoldBackgroundColor: Colors.white),
      home: Scaffold(
        appBar: AppBar(
          backgroundColor: Colors.white,
          elevation: 0,
        ),
        body: 
        Center(
          child: InkWell(
            onTap: () {
              Switch(
                onChanged: _onSwitchChanged,
                value: switchOn,
              );
            },
            child: Container(
              color: Colors.white,
              child: ClipRRect(
                child: switchOn ? Image.asset('lib/assets/closed.png') : Image.asset('lib/assets/open.png')
              )
            ),
          ),
        )
        ),
      );
  }
}

Answer 1

只需像这样切换 switchOn 变量：

void _onSwitchChanged(bool value) {
    setState(() {
      switchOn = !switchOn;
    });
  }

Answer 2

我认为您的方法_onSwitchChanged 需要使用传入的布尔值参数（由Switch 提供）。

这是一个显示典型用法的类似示例：

import 'package:flutter/material.dart';

class SwitchFieldPage extends StatefulWidget {
  @override
  _SwitchFieldPageState createState() => _SwitchFieldPageState();
}

class _SwitchFieldPageState extends State<SwitchFieldPage> {
  bool switchVal = false;
  String monkey = 'A';

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Switch Field'),
      ),
      body: SafeArea(
        child: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: [
              Text('Monkey $monkey'),
              Switch(
                onChanged: (val) { // ← remember to use val (bool)
                  print('Switch value: $val');
                  setState(() {
                    switchVal = val; // this sets the Switch setting on/off
                    monkey = val ? 'B' : 'A';  // change your monkey source
                  });

                },
                value: switchVal,
              )
            ],
          ),
        ),
      ),
    );
  }
}

Answer 3

您可以使用GestureDetector 或InkWell 来检测用户何时按下图像。对于更新图像，我建议学习state management。现在为了简单起见，我们将使用StreamBuilder。

screen.dart:

final ScreenBloc _screenBloc = ScreenBloc();

// This is inside your widget build
StreamBuilder<AuthState>(
          stream: _screenBloc.pic,
          initialData: false,
          builder: (context, snapshot) {
              return GestureDetector(
                 onTap: ()=> _screenBloc.toggle(),
                 child: snapshot.data?Image.asset('lib/assets/closed.png') : Image.asset('lib/assets/open.png'),
              );
          },
)

screen_bloc.dart:

class ScreenBloc{
 bool _currentState=false;
 StreamController<bool> _picStream = StreamController<bool>();
 Stream<bool> get pic => _picStream.stream;
 void toggle(){
  _currentState=!_currentState;
  _picStream.add(_currentState);
 }
}