将 ListView 的容器自定义为所需的结果

Question

这就是我想要实现的目标：

你能告诉我如何实现吗？

它是ListView.seperated的元素之一。我已经创建了具有设定高度的 Container，但是那张照片有问题。另外，我怎样才能把它左对齐，然后在右边我可以有 3 行文本？

Container advertisementCard(Items data, BuildContext context) {
    return Container(
      height: MediaQuery.of(context).size.height * 0.18,
      child: Card(
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(4.0),
          side: BorderSide(
            color: Colors.blue,
          ),
        ),
        child: Column(
          children: [
            Image.network(
              'https://picsum.photos/250?image=9',
              width: MediaQuery.of(context).size.width * 0.2,
              height: MediaQuery.of(context).size.height * 0.1,
            )
          ],
        ),
      ),
    );

以及如何调用此方法：

FutureBuilder<List<Items>>(
                  future: _listOfItems,
                  builder: (context, snapshot) {
                    if (!snapshot.hasData) {
                      return Center(child: CircularProgressIndicator());
                    } else {
                      return ListView.separated(
                        scrollDirection: Axis.vertical,
                        shrinkWrap: true,
                        itemCount: snapshot.data!.length,
                        itemBuilder: (BuildContext context, int index) =>
                            advertisementCard(snapshot.data![index], context),
                        separatorBuilder: (BuildContext context, int index) {
                          return SizedBox(
                            height: 13,
                          );
                        },
                      );
                    }
                  },
                ),

Answer 1

希望这对你有用。

 Container advertisementCard(BuildContext context) {
    return Container(
      height: MediaQuery.of(context).size.height * 0.18,
      child: Card(
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(4.0),
          side: BorderSide(
            color: Colors.blue,
          ),
        ),
        child: LayoutBuilder(
          builder: (context, constraints) => Row(
            mainAxisAlignment: MainAxisAlignment.spaceAround,
            children: [
              Padding(
                padding: const EdgeInsets.all(8.0),
                child: Image.network(
                  'https://picsum.photos/250?image=9',
                  fit: BoxFit.cover,
                  //removing padding here
                  width: constraints.maxWidth * 0.4 - (8.0 * 2),
                  height: constraints.maxHeight * .8,
                ),
              ),
              SizedBox(
                width: constraints.maxWidth * 0.6,
                child: Padding(
                  padding: const EdgeInsets.all(8.0),
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                      Text(
                        "Titssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssle",
                        overflow: TextOverflow.ellipsis,
                        softWrap: true,
                      ),
                      SizedBox(
                        height: constraints.maxHeight * .2,
                      ),
                      Text("Description"),
                      Text("Deasdsscription"),
                    ],
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }

将 ListView 的容器自定义为所需的结果

Customizing Container of ListView to desired result

listview

dart

flutter