使用 api 在颤振中返回卡片列表

Posted 2023-02-23

【中文标题】使用 api 在颤振中返回卡片列表

【英文标题】：Return a list of cards in flutter using an api

【发布时间】：2020-02-29 22:09:46

【问题描述】：

我希望根据我在数据库中的内容返回一张卡片列表，但它没有按我的意愿工作。请暂时忽略图片图标。

（这只是 *** 的一个随机文本，允许我发布我的问题 - Lorem ipsum dolor sit amet, consectetur adipiscing elit。在 dapibus nec nunc a varius 中。Mauris porta maximus mi, ut imperdiet urna tincidunt ac. Nam tincidunt nisi velit。Praesent rhoncus ut leo et placerat。Nunc non ultrices erat，一种 pellentesque tortor。Pellentesque burningum dignissim ultrices。Phasellus nec velit eget libero viverra efficitur quis eget nunc。Donec ut magna non velit dictum tristique eget eget diam。）

代码如下：

import 'package:flutter/material.dart';
import 'package:localizamed_app/models/medicos_get.dart';
import 'package:http/http.dart' as http;

class MedCard extends StatelessWidget 
  static List<Medicos> medicos;

  MedCard(Key key) : super(key: key);

  @override
  Widget build(BuildContext context) 
    return new Container(
      margin: const EdgeInsets.symmetric(
        vertical: 16.0,
        horizontal: 24.0,
      ),
      child: Center(
        child: new Stack(
          children: <Widget>[
            medCard,
            medThumbnail,
          ],
        ),
      ),
    );
  

  final medThumbnail = new Container(
    margin: new EdgeInsets.symmetric(vertical: 16.0),
    alignment: FractionalOffset.centerLeft,
    child: new Container(
      height: 95.0,
      width: 95.0,
      decoration: BoxDecoration(
        borderRadius: BorderRadius.all(Radius.circular(270)),
        /* image: DecorationImage(
          fit: BoxFit.fill,
          image: AssetImage("images/medico.jpg"),
        ) */
      ),
    ),
  );

  final medCard = new Container(
      height: 124.0,
      width: 300.0,
      margin: new EdgeInsets.only(left: 46.0),
      decoration: new BoxDecoration(
          color: Colors.white,
          shape: BoxShape.rectangle,
          borderRadius: new BorderRadius.circular(8.0),
          boxShadow: <BoxShadow>[
            new BoxShadow(
              color: Colors.black54,
              blurRadius: 5.0,
              offset: new Offset(2.0, 5.0),
            )
          ]),
      child: Container(
          padding: EdgeInsets.only(
            left: 50,
          ),
          decoration: BoxDecoration(
              border: Border(
                  bottom: BorderSide(color: Colors.redAccent, width: 3.0))),
          child: Container(
              child: FutureBuilder<List<Medicos>>(
                  future: getMedicos(http.Client()),
                  builder: (context, snapshot) 
                    return ListView.builder(
                        itemCount: snapshot.data.length, //medicos?.length ?? 0,
                        itemBuilder: (context, index) 
                          if (snapshot.hasData) 
                            return ListTile(
                                title: Text(
                                  snapshot.data[index].nome,
                                  style: TextStyle(fontSize: 20),
                                ),
                                subtitle: Text(
                                  snapshot.data[index].cidade,
                                  style: TextStyle(fontSize: 16),
                                ));
                           else if (snapshot.hasError) 
                            print('DEU ERRO' + snapshot.error);
                          
                          return CircularProgressIndicator();
                        );
                  ))));

我想成为正确的形象

【问题讨论】：

我想成为左图*

【参考方案1】：

return Container(
  width: MediaQuery.of(context).size.width;
  height: 150;
  padding: EdgeInsets.symmetric(horizontal: 20),
  child: Stack(
    children: <Widget>[
       Container(
         child: Row(
           children: <Widget>[
              Container(
                width: 60,
              ),
              Expanded(
                child: Container(
                 decoration: BoxDecoration(
                   boxShadow: [BoxShadow(blurRadius: 10)]
                 ),
                 child: Column(
                   children: <Widget>[
                      Text(*snapshot data name*),
                      Text(*snapshot data location*)
                     ]
                   )
                 )
              )
           ]
         )
      ),
      Container(
        width: 150,
        height: 150,
        decoration: BoxDecoration(
           borderRadius: BorderRadius.circular(1000),
           image: DecorationImage(
             image: NetworkImage(*snapshot data image*)
          )
        )
      )
    ]
  )
);

在这里修复一些错位