我如何在Flutter中显示所选下拉选项下方的文本?

t9aqgxwy  于 2023-05-30  发布在  Flutter
关注(0)|答案(1)|浏览(152)

我写了一个代码,其中的动物的形象将被显示&我必须选择动物的名字从下拉框。
下拉框将包含动物列表,如狗,猫,狮子。假设,如果我选择狗,只要狗选项被选中,下面的文字应该显示“狗是家庭犬科和食肉目的家养哺乳动物。”
同样,如果我选择猫选项,下面的文字应该显示“猫有一个强大的灵活的机构,快速React,锋利的牙齿”。
代码如下:

import 'package:flutter/material.dart';
 
void main() {
  runApp(MyApp());
}
 
class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Demo',
      theme: ThemeData(
 
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Section 2'),
    );
  }
}
 
class MyHomePage extends StatefulWidget {
  MyHomePage({Key? key, required this.title}) : super(key: key);
 
 
  final String title;
 
  @override
  _MyHomePageState createState() => _MyHomePageState();
}
 
class _MyHomePageState extends State<MyHomePage> {
 String _selectedAnimal="Dog";
 var animal={'Dog':'W1','Cat':'W2','Lion':'W3'};
 
 
 List _animals=[];
 AnimalDependentDropDown(){
   animal.forEach((key, value) {
     _animals.add(key);
   });
 }
 
  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    AnimalDependentDropDown();
  }
  @override
 
  Widget build(BuildContext context) {
 
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Container(
        margin:EdgeInsets.all(15),
 
        child: Column(
 
          mainAxisAlignment: MainAxisAlignment.start,
          children: <Widget>[
            SizedBox(height: 23,),
          Align(
           alignment: Alignment.centerLeft,
           child:Text("Animal",  style: TextStyle(fontWeight:FontWeight.bold,fontSize: 18),),
          ),
            Container(
              width: 400,
              child: DropdownButton(
                value: _selectedAnimal,
                onChanged: (newValue){
                  setState(() {
                     _selectedAnimal="$newValue";
                  });
                },
                
                items:_animals.map((animal){
                  return DropdownMenuItem(
                    child: Text(animal),
                    value:animal,
                  );
                }).toList(),
              ),
            ),
            SizedBox(height: 23,),
          ],
        ),
      ),
    // This trailing comma makes auto-formatting nicer for build methods.
    );
  }
}

从下拉框中选择选项后,我无法显示文本。

s1ag04yj

s1ag04yj1#

当您使用Map键dropdownButton时,您可以使用选定的键来显示值。

Text(" ${animal[_selectedAnimal]}"),
class _MyHomePageState extends State<MyHomePage> {
  String? _selectedAnimal;
  Map<String, String> animal = {
    'Dog': 'A dog is a domestic mammal of the family Canidae and the order Carnivora.',
    'Cat': 'Cats have a strong flexible body, quick reflexes, sharp teeth',
    'Lion': 'W3'
  };

  late final List _animals = animal.keys.toList();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        padding: EdgeInsets.all(15),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.start,
          children: <Widget>[
            const SizedBox(height: 23),
            const Align(
              alignment: Alignment.centerLeft,
              child: Text(
                "Animal",
                style: TextStyle(fontWeight: FontWeight.bold, fontSize: 18),
              ),
            ),
            SizedBox(
              width: 400,
              child: DropdownButton(
                value: _selectedAnimal,
                onChanged: (newValue) {
                  setState(() {
                    _selectedAnimal = "$newValue";
                  });
                },
                items: _animals.map((animal) {
                  return DropdownMenuItem(
                    child: Text(animal),
                    value: animal,
                  );
                }).toList(),
              ),
            ),
            SizedBox(height: 24),
            Text(" ${animal[_selectedAnimal]}"),
          ],
        ),
      ),
      // This trailing comma makes auto-formatting nicer for build methods.
    );
  }
}

相关问题