動態創建Listview

Question

class _SearchState extends State<Search> {


  @override
  Widget build(BuildContext context) {
    widget.id;

    return new Scaffold(

      appBar: new AppBar(

        actions: <Widget>[

          new IconButton(
              icon: new Icon(Icons.exit_to_app),
              onPressed: _getTicketDetails
          )

        ],
        centerTitle: true,
        title: new Text
          ("TicketsDetails", style: const TextStyle(
          fontFamily: 'Poppins'
          ,),),),

    );
  }      


_getTicketDetails() async {
        print(widget.id);
        var userDetails = {};


        final response = await http.get(
            "https:...", headers: {
          HttpHeaders.AUTHORIZATION:
          "...
        });

        List returnTicketDetails = json.decode(response.body);

        print(returnTicketDetails);

        for (var i = 0; i < (returnTicketDetails?.length ?? 0); i++) {
          final ticketresponse = await http.get(
              "..${returnTicketDetails[i]["user_id"]
                  .toString()}", headers: {
            HttpHeaders.AUTHORIZATION:
            "...

          });

          userDetails[returnTicketDetails[i]["user_id"]] =
              json.decode(ticketresponse.body);
        }
        print(userDetails);


            }

嗨，您好！ 在控制台中，我通過打印得到的輸出（userDetails）為： {513549601: {first_name: Test, last_name: Account, profile_image: tempURL 。 但是，我想使用以下userDetails[user_id][first_name] userDetails[user_id][last_name]動態創建Listview ： userDetails[user_id][first_name] userDetails[user_id][last_name]等等...但是我擔心的是，我應該在哪里實現Listview ？ 因為我已經在最頂部使用了Widget構建。

Answer 1

嘗試這個！

假設您從API中獲取了數據，例如userdetails列表。 然后，您只需要一個ListView.builder（）和自定義UserWidget / ListTile即可。

結果 ：

編碼 ：

   import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';

void main() {
  runApp(new MaterialApp(home: new Home()));
}

class Home extends StatelessWidget {
  List userdetails = [
    {
      "first_name": "FLUTTER",
      "last_name": "AWESOME",
      "image_url": "https://pbs.twimg.com/profile_images/760249570085314560/yCrkrbl3_400x400.jpg"
    },
    {
      "first_name": "ABC",
      "last_name": "XYZ",
      "image_url": "https://www.rd.com/wp-content/uploads/2017/09/01-shutterstock_476340928-Irina-Bg-1024x683.jpg"
    },
    {
      "first_name": "FLUTTER",
      "last_name": "AWESOME",
      "image_url": "https://pbs.twimg.com/profile_images/760249570085314560/yCrkrbl3_400x400.jpg"
    },
    {
      "first_name": "ABC",
      "last_name": "XYZ",
      "image_url": "https://www.rd.com/wp-content/uploads/2017/09/01-shutterstock_476340928-Irina-Bg-1024x683.jpg"
    },
    {
      "first_name": "FLUTTER",
      "last_name": "AWESOME",
      "image_url": "https://pbs.twimg.com/profile_images/760249570085314560/yCrkrbl3_400x400.jpg"
    },
    {
      "first_name": "ABC",
      "last_name": "XYZ",
      "image_url": "https://www.rd.com/wp-content/uploads/2017/09/01-shutterstock_476340928-Irina-Bg-1024x683.jpg"
    },
    {
      "first_name": "FLUTTER",
      "last_name": "AWESOME",
      "image_url": "https://pbs.twimg.com/profile_images/760249570085314560/yCrkrbl3_400x400.jpg"
    },
    {
      "first_name": "ABC",
      "last_name": "XYZ",
      "image_url": "https://www.rd.com/wp-content/uploads/2017/09/01-shutterstock_476340928-Irina-Bg-1024x683.jpg"
    },
  ];

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      backgroundColor: Colors.grey,
      appBar: new AppBar(
        title: new Text("Dynamic List"),
        backgroundColor: Colors.redAccent,
      ),
      body: new ListView.builder(
        itemBuilder: (BuildContext context, int index) {
          return new UserWidget(
            firstName: userdetails[index]['first_name'],
            lastName: userdetails[index]['last_name'],
            imageURL: userdetails[index]['image_url'],
          );
        },
        itemCount: userdetails.length,
      ),
    );
  }
}

class UserWidget extends StatelessWidget {
  final String firstName;
  final String lastName;
  final String imageURL;

  const UserWidget({Key key, this.firstName, this.lastName, this.imageURL}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return new Container(
      decoration: new BoxDecoration(border: new Border.all(width: 1.0, color: Colors.grey), color: Colors.white70),
      margin: new EdgeInsets.symmetric(vertical: 1.0),
      child: new ListTile(
        leading: new FadeInImage(
          placeholder: new AssetImage('assets/me.jpg'),
          image: new NetworkImage(imageURL),
        ),
        title: new Text("First Name : " + firstName),
        subtitle: new Text("Last Name : " + lastName),
      ),
    );
  }
}

另外，檢查FadeInImage它為網絡圖像提供一個占位符[顯示直到圖像加載為止的本地資產]。