flutter - 使用“切换”(Flutter)切换“文本”小部件

Question

我正在尝试制作一个交换小部件，该小部件显示两个不同的文本。激活时，它下面显示一个TextField，顶部是不可见的，而禁用时它上面显示一个Text，而底部是不可见。但是它没有在屏幕上显示任何内容，只是在按钮上显示，我也不知道该怎么办。没有错误日志，也没有运行时。

import 'dart:ui';
import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    home: MyApp(),
  ));
}

class MyApp extends StatefulWidget {
  @override
  _State createState() => _State();
}

class _State extends State<MyApp> {
  bool isSwitched = false;
  bool isVisible = true;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Switch Text'),
        centerTitle: true,
      ),
      body: ClipRect(
        child: BackdropFilter(
          filter: ImageFilter.blur(sigmaX: 500, sigmaY: 500),
          child: Container(
            width: 500,
            height: 500,
            child: Column(
              children: [
                Switch(
                  value: isSwitched,
                  onChanged: (value) {
                    setState(() {
                      isSwitched = value;
                    });
                    textoLaranja();
                  },
                  activeTrackColor: Colors.grey[300],
                  activeColor: Colors.grey[300],
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }

  textoLaranja() {
    isSwitched == false
        ? Container(
            child: Column(
              children: [
                Expanded(
                  flex: 0,
                  child: Row(
                    mainAxisSize: MainAxisSize.max,
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: [
                      Expanded(
                        child: Column(
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: [
                            Text(
                              "Valor a receber em 14/10/20",
                              textScaleFactor: 1.3,
                            ),
                          ],
                        ),
                      ),
                    ],
                  ),
                ),
                Expanded(
                  flex: 1,
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.start,
                    crossAxisAlignment: CrossAxisAlignment.start,
                    mainAxisSize: MainAxisSize.max,
                    children: [
                      Padding(
                        padding: EdgeInsets.only(bottom: 30),
                        child: Text(
                          "R\$ 1250,35",
                          textScaleFactor: 1.3,
                          style: TextStyle(
                              fontWeight: FontWeight.w600,
                              color: Colors.orange),
                        ),
                      ),
                    ],
                  ),
                ),
              ],
            ),
          )
        : Container(
            child: Column(
              children: [
                TextField(),
              ],
            ),
          );
  }
}

Answer 1

您放错了位置调用textoLaranja，它应该是Column的子代，而不是Switch onChange。另外，您必须返回小部件。
看一下这个。

class _State extends State<MyApp> {
  bool isSwitched = false;
  bool isVisible = true;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Switch Text'),
        centerTitle: true,
      ),
      body: ClipRect(
        child: BackdropFilter(
          filter: ImageFilter.blur(sigmaX: 500, sigmaY: 500),
          child: Container(
            width: 500,
            height: 500,
            child: Column(
              children: [
                Switch(
                  value: isSwitched,
                  onChanged: (value) {
                    setState(() {
                      isSwitched = value;
                    });
                  },
                  activeTrackColor: Colors.grey[300],
                  activeColor: Colors.grey[300],
                ),
               textoLaranja(); //CALLED HERE, SO IT IS A CHILD OF THE COLUMN.
              ],
            ),
          ),
        ),
      ),
    );
  }

  textoLaranja() {
    return !isSwitched //RETURN ADDED
        ? Container(
            child: Column(
              children: [
                Expanded(
                  flex: 0,
                  child: Row(
                    mainAxisSize: MainAxisSize.max,
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: [
                      Expanded(
                        child: Column(
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: [
                            Text(
                              "Valor a receber em 14/10/20",
                              textScaleFactor: 1.3,
                            ),
                          ],
                        ),
                      ),
                    ],
                  ),
                ),
                Expanded(
                  flex: 1,
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.start,
                    crossAxisAlignment: CrossAxisAlignment.start,
                    mainAxisSize: MainAxisSize.max,
                    children: [
                      Padding(
                        padding: EdgeInsets.only(bottom: 30),
                        child: Text(
                          "R\$ 1250,35",
                          textScaleFactor: 1.3,
                          style: TextStyle(
                              fontWeight: FontWeight.w600,
                              color: Colors.orange),
                        ),
                      ),
                    ],
                  ),
                ),
              ],
            ),
          )
        : Container(
            child: Column(
              children: [
                TextField(),
              ],
            ),
          );
  }
}