通过在 flutter 中点击不同的选项来显示小部件？

Question

我正在使用颤振。当我点击不同的选项时，我想显示不同的小部件。选择选项 A 时，将显示选项 A widget。选择选项 B 时，选项 B 小部件显示在选项栏下方，反之亦然（如选项卡栏）。代码附在下面。如果有人帮忙，我很高兴。 ..

import 'package:flutter/material.dart';

class Cards extends StatefulWidget {
const Cards({Key? key}) : super(key: key);

@override
State<Cards> createState() => _CardsState();
}

class _CardsState extends State<Cards> {
@override
Widget build(BuildContext context) {
return Scaffold(
  appBar: AppBar(
    title: const Text("Cards"),
  ),
  body: Padding(
    padding: const EdgeInsets.only(top: 20),
    child: Row(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: [
        optionCards("A", "assets/icons/recycle.png", context, "1"),
        optionCards("B", "assets/icons/tools.png", context, "2"),
        optionCards("C", "assets/icons/file.png", context, "3"),
      ],
    ),
  ),
 );
}

Widget optionCards(
  String text, String assetImage, BuildContext context, String cardId) {
return Container(
  width: 100,
  height: 100,
  decoration: ShapeDecoration(
    color: Colors.grey,
    shape: const RoundedRectangleBorder(
      borderRadius: BorderRadius.all(
        Radius.circular(5),
      ),
    ),
  ),
  child: SingleChildScrollView(
    child: Column(
      children: [
        const Padding(
          padding: EdgeInsets.only(top: 13),
          child: IconButton(
            onPressed: null,
            icon: Icon(Icons.file_copy),
          ),
        ),
        Text(
          text,
          style: const TextStyle(
            fontSize: 14,
            fontFamily: 'CeraPro',
            color: Color.fromRGBO(0, 0, 0, 1),
          ),
        ),
      ],
     ),
   ),
 );
}

Widget optiona() {
return Container();
}

Widget optionb() {
 return Container();
}

Widget optionc() {
return Container();
}

}

Answer 1

您可以使用 Visibility 小部件来包装要隐藏或显示的小部件，并通过变量跟踪要显示的小部件。然后你可以相应地设置visible 属性。

import 'package:flutter/material.dart';

class Cards extends StatefulWidget {
const Cards({Key? key}) : super(key: key);

@override
State<Cards> createState() => _CardsState();
}

class _CardsState extends State<Cards> {
var showOption = "";

@override
Widget build(BuildContext context) {
return Scaffold(
  appBar: AppBar(
    title: const Text("Cards"),
  ),
  body: Padding(
    padding: const EdgeInsets.only(top: 20),
    child: Row(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: [
        optionCards("A", "assets/icons/recycle.png", context, "1"),
        optionCards("B", "assets/icons/tools.png", context, "2"),
        optionCards("C", "assets/icons/file.png", context, "3"),
      ],
    ),
  ),
 );
}

Widget optionCards(
  String text, String assetImage, BuildContext context, String cardId) {
return Container(
  width: 100,
  height: 100,
  decoration: ShapeDecoration(
    color: Colors.grey,
    shape: const RoundedRectangleBorder(
      borderRadius: BorderRadius.all(
        Radius.circular(5),
      ),
    ),
  ),
  child: SingleChildScrollView(
    child: Column(
      children: [
        const Padding(
          padding: EdgeInsets.only(top: 13),
          child: IconButton(
            onPressed: null,
            icon: Icon(Icons.file_copy),
          ),
        ),
        Text(
          text,
          style: const TextStyle(
            fontSize: 14,
            fontFamily: 'CeraPro',
            color: Color.fromRGBO(0, 0, 0, 1),
          ),
        ),
      ],
     ),
   ),
 );
}

Widget optiona() {
return Visibility(visible: showOption == "A", child: Container());
}

Widget optionb() {
 return Visibility(visible: showOption == "B", child: Container());
}

Widget optionc() {
return Visibility(visible: showOption == "C", child: Container());
}

现在您可以随时更改 showOption 变量以显示其他选项。

Answer 2


class Cards extends StatefulWidget {
  const Cards({Key? key}) : super(key: key);

  @override
  State<Cards> createState() => _CardsState();
}

class _CardsState extends State<Cards> {

  Widget? selectedOption;
  @override
  Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      title: const Text("Cards"),
    ),
    body: Padding(
      padding: const EdgeInsets.only(top: 20),
      child: Column(
        children: [
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              InkWell(
                onTap: (){
                  setState(() {
                    selectedOption = optiona();
                  });
                },
                child: optionCards("A", "assets/icons/recycle.png", context, "1")
              ),
              InkWell(
                onTap: (){
                  setState(() {
                    selectedOption = optionb();
                  });
                },
                child: optionCards("B", "assets/icons/tools.png", context, "2")
              ),
              InkWell(
                onTap: (){
                  setState(() {
                    selectedOption = optionc();
                  });
                },
                child: optionCards("C", "assets/icons/file.png", context, "3")
              ),
            ],
          ),

          // options
          if(selectedOption != null) selectedOption!
        ],
      ),
    ),
  );
  }

Widget optionCards(
  String text, String assetImage, BuildContext context, String cardId) {
  return Container(
    width: 100,
    height: 100,
    decoration: const ShapeDecoration(
      color: Colors.grey,
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.all(
          Radius.circular(5),
        ),
      ),
    ),
    child: SingleChildScrollView(
      child: Column(
        children: [
          const Padding(
            padding: EdgeInsets.only(top: 13),
            child: IconButton(
              onPressed: null,
              icon: Icon(Icons.file_copy),
            ),
          ),
          Text(
            text,
            style: const TextStyle(
              fontSize: 14,
              fontFamily: 'CeraPro',
              color: Color.fromRGBO(0, 0, 0, 1),
            ),
          ),
        ],
      ),
    ),
  );
  }

  Widget optiona() {
  return Container();
  }

  Widget optionb() {
  return Container();
  }

  Widget optionc() {
  return Container();
  }
}

通过在 flutter 中点击不同的选项来显示小部件？

Showing widgets by taping on different options in flutter?

flutter

flutter-layout

flutter-dependencies