根据颤动中的下拉菜单选择显示文本

Question

我是 Flutter/Dart 的新手，我正试图弄清楚如何在标题中显示某些内容：文本取决于下拉菜单选项的值。我创建了一个带有 DropDownButton 的 ListTile，其中的项目存储为字符串。我想根据 DropDownButton 中选择的字符串显示一个数字。我可以从 setState 中读取值，并根据该字符串输出一个值吗？还是有更好的方法来做到这一点？我已经用谷歌搜索了大约 2 个小时，但似乎无法理解。

class _BarneAnestesiState extends State<BarneAnestesi> {

String Alder;
  @override

  Widget build(BuildContext context) {


    List<Widget> containers = [

      Container(

        color: Colors.grey,
        child: Scaffold(

          body: new Column(
            children: <Widget> [


     new ListTile(
                leading: const Icon(Icons.baby_changing_station),
                title: new DropdownButton(
                  hint: Alder == null
                      ? Text('Dropdown')
                      : Text(
                    Alder,
                    style: TextStyle(color: Colors.blue),
                  ),
                  isExpanded: true,
                  iconSize: 30.0,
                  style: TextStyle(color: Colors.blue),
                  items: ['Nyfødt', '2 mnd.', '1 år', '2 år', '4 år', '7 år'].map(
                        (val) {
                      return DropdownMenuItem<String>(
                        value: val,
                        child: Text(val),
                      );
                    },
                  ).toList(),
                  onChanged: (val) {
                    setState(
                          () {
                        Alder = val;
                      },
                    );
                  },
                )),


              new ListTile(
                title: new Text(), //I want to display it here. F.eks. 2mnd. should display 3,5mm
              ),

Answer 1

我不确定您的问题是什么，但我可以考虑以下几点：

• 要引用一个变量只需使用它的名字，在这里你必须检查是否为空，这样你就可以使用the ?? operator
• 要显示一个数字然后是一个字符串，你可以使用 dart String interpolation 这将引导你执行 '$title:$text
• 请注意variable should use the lowerCamelCase naming，而不是UpperCamelCase。所以在你的代码中Alder 应该是alder

最后，这是包含所有这些的代码。这可能不是您想要的，但您应该能够对此进行扩展。

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: BarneAnestesi(),
      ),
    );
  }
}

class BarneAnestesi extends StatefulWidget {
  @override
  _BarneAnestesiState createState() => _BarneAnestesiState();
}

class _BarneAnestesiState extends State<BarneAnestesi> {
  String alder;
  final List<String> items = ['Nyfødt', '2 mnd.', '1 år', '2 år', '4 år', '7 år'];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: new Column(
        children: <Widget>[
          new ListTile(
              leading: const Icon(Icons.baby_changing_station),
              title: new DropdownButton(
                hint: alder == null
                    ? Text('Dropdown')
                    : Text(
                  alder,
                  style: TextStyle(color: Colors.blue),
                ),
                isExpanded: true,
                iconSize: 30.0,
                style: TextStyle(color: Colors.blue),
                items: items.map(
                      (val) {
                    return DropdownMenuItem<String>(
                      value: val,
                      child: Text(val),
                    );
                  },
                ).toList(),
                onChanged: (val) {
                  setState(
                        () {
                      alder = val;
                    },
                  );
                },
              )),
          new ListTile(
            title: new Text(
                (alder == 'Nyfødt') ? 'Anything for Nyfødt' :
                (alder == '2 mnd.') ? 'Anything for 2 mnd.' :
                (alder == '1 år') ? 'Anything for 1 år' :
                (alder == '2 år') ? 'Anything for 2 år' :
                (alder == '4 år') ? 'Anything for 4 år' :
                (alder == '7 år') ? 'Anything for 7 år' : ''
            ), //I want to display it here. F.eks. 2mnd. should display 3,5mm
          )
        ],
      ),
    );
  }
}