Flutter:为字符串列表中的每个项目创建按钮(飞镖)

时间:2019-05-12 17:17:58

标签: list for-loop button foreach

我有一个字符串列表(称为namesList)。我想为列表中的每个String创建一个带有名称之一的按钮。

正如您在下面的代码中看到的那样,我尝试使用for循环。但是,在播放代码时,我只能看到带有文本“ Anna”的第一个按钮。

 import 'package:flutter/material.dart';
 class ButtonsWithName extends StatefulWidget{
 @override
   State<StatefulWidget> createState() {
   // TODO: implement createState
   return _ButtonsWithNameState();
   }
 }

 class _ButtonsWithNameState extends State<ButtonsWithName> {
   String name1;
   String name2; 
   String name3;
   String name4;
   String name5;
   var namesList = new List<String>();


 @override
 void initState() {
 name1 = 'Anna';
 name2 = 'Bernd';
 name3 = 'Christina';
 name4 = 'David';
 name5 = 'Elena',
 namesList.add(name1);
 namesList.add(name2);
 namesList.add(name3);
 namesList.add(name4);
 namesList.add(name5);

 super.initState();
 }


Widget _buildButtonsWithNames() {
 for(int i=0; i < namesList.length; i++){
  RaisedButton(child: Text(answerList[0]));
}
return RaisedButton[i];
}


 @override
 Widget build(BuildContext context) {
 return Scaffold(
   body: Wrap(children: <Widget>[
    _buildButtonsWithNames();
   ]);
 )
 }
}

我希望最后有5个RaisedButtons和String-list文本,即带有文本“ Anna”的按钮,带有文本“ Bernd”的按钮,依此类推。 我真的很感谢任何人在此问题上的帮助!

2 个答案:

答案 0 :(得分:1)

您得到的结果是正常的,因为您的_buildButtonsWithNames()列表仅返回一个按钮,而不是按钮列表。因此,解决方案是创建此列表,填充它,然后返回它。参见下面的内容:

import 'package:flutter/material.dart';

class ButtonsWithName extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    // TODO: implement createState
    return _ButtonsWithNameState();
  }
}

class _ButtonsWithNameState extends State<ButtonsWithName> {
  String name1;
  String name2;
  String name3;
  String name4;
  String name5;
  var namesList = new List<String>();
  List<RaisedButton> buttonsList = new List<RaisedButton>();

  @override
  void initState() {
    super.initState();
    name1 = 'Anna';
    name2 = 'Bernd';
    name3 = 'Christina';
    name4 = 'David';
    name5 = 'Elena';
    namesList.add(name1);
    namesList.add(name2);
    namesList.add(name3);
    namesList.add(name4);
    namesList.add(name5);
  }

  List<Widget> _buildButtonsWithNames() {
    for (int i = 0; i < namesList.length; i++) {
      buttonsList
          .add(new RaisedButton(onPressed: null, child: Text(namesList[i])));
    }
    return buttonsList;
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(body: Wrap(children: _buildButtonsWithNames()));
  }
}

答案 1 :(得分:0)

这对我有用,这要归功于之前的一些改进:

    import 'package:flutter/material.dart';
import 'package:audioplayers/audio_cache.dart';

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

class XylophoneApp extends StatelessWidget {
  final player = AudioCache();

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: SafeArea(
          child: Container(
            child: PlaySoundButtons()
          ),
        ),
      ),
    );
  }
}

class PlaySoundButtons extends StatefulWidget {
  @override
  _PlaySoundButtonsState createState() => _PlaySoundButtonsState();
}

class _PlaySoundButtonsState extends State<PlaySoundButtons> {
  List<String> soundNames = [
    'note1.wav',
    'note2.wav',
    'note3.wav',
    'note4.wav',
    'note5.wav',
    'note6.wav',
    'note7.wav',
  ];
  List<FlatButton> buttonsList = [];

  final player = AudioCache();

  @override
  void initState() {
    super.initState();
    for (int i = 0; i <  soundNames.length; i++) {
      buttonsList.add(new FlatButton(onPressed: () {
        player.play(soundNames[i]);
      }, child: Text(soundNames[i])));
    }
  }

  @override
  Widget build(BuildContext context) {
    return Wrap(children: buttonsList);
  }
}