Question

如何在单击按钮时创建新的小部件？例如，我有以下代码：

child: MaterialButton(

    child: Padding(
        padding: const EdgeInsets.symmetric(
                vertical: 10.0, horizontal: 42.0),
            child: Text(
                "LOGIN",
                style: TextStyle(
                    color: Colors.white,
                    fontSize: 25.0,
                    fontFamily: "WorkSansBold"),
            ),
    ),
    onPressed: () {
        var url = 'https://jsonplaceholder.typicode.com/users';
        http.get(url).then((response) {
            print("Response status: ${response.statusCode}");
            print("Response body: ${response.body}");
            Navigator.push(
                context,
                MaterialPageRoute(
                    builder: (context) => new SecondScreen()),
            );
        });
    },
)

在这里，我想使用JSON中的数据创建一个新屏幕。为了简单起见，可以说我需要为所有Text()和JSON响应中的数字创建新的name小部件。像电话簿一样。

在此示例中，SecondScreen小部件应包含什么？

Answer 1

您可以使用ListView为每个值构建一个Text小部件。

class SecondScreen extends StatelessWidget{

    var values;

    SecondScreen(this.values);

    Widget build(buildcontext context){
        return ListView.builder(
            itemBuilder: (context, index){
                if(index < values.length)
                {
                    return Card(child: Text(values[index]));
                }
            }
        );
    }
}

Answer 2

类似的东西

class SecondScreen extends StatelessWidget {
   final String body;
   SecondScreen(this.body);

  @override
  Widget build(BuildContext context) {
    List<dynamic> myList = json.decode(body);
    return Scaffold(
      appBar: AppBar(title: Text('Second Screen')),
      body:  Container(
        child: ListView(
          children: myList.map((e)=>Text(e['name'])).toList(),
        ),
      ),
    );
  }
}

用法：

Navigator.push(context,MaterialPageRoute(
                      builder: (context) => new SecondScreen(response.body)),
                );

在按下按钮时创建新的小部件

2 个答案: