如何将物品堆叠在一起？

Question

我正在尝试制作如下图所示的小部件。

我的心态是将项目堆叠到列表视图中。物品是堆叠的。但是当将堆栈嵌套到listview中时，堆栈需要被包裹在一个固定的小部件中。如果您删除列表视图，则无法将其放入列表中，如图所示。第一次期望人们忽略并没有错。

我希望得到答案。谢谢。

body: Container(
        color: Colors.white,
        width: double.infinity,
        child: SingleChildScrollView(
            child: Stack(
              children: <Widget>[
                Positioned(top: 10,child: card1(),),
                Positioned(bottom: 10,child: card1(),),
              ],
            ),
        ),
      ),

物品

static Widget card1() {
    return Card(
      elevation: 0,
      child: Container(
        margin: EdgeInsets.only(top: 100),
        width: double.infinity,
        padding: EdgeInsets.only(top: 18, left: 18),
        decoration: BoxDecoration(
          color: Colors.white,
          boxShadow: [
            BoxShadow(offset: Offset(0, 8), blurRadius: 8, spreadRadius: 0),
          ],
        ),
        child: Stack(
          children: <Widget>[
            Container(
              width: 343,
              height: 196,
              child: SvgPicture.asset(
                "assets/bg.svg",
              ),
            ),
            Container(
              padding: EdgeInsets.only(
                top: 24,
                left: 24,
              ),
              child: Row(
                children: <Widget>[
                  Container(
                    padding: EdgeInsets.only(left: 10),
                    child: Text("Vietcombank"),
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }

Answer 1

我创建了StackedListTile，你可以试试（Demo here DartPad）

import 'package:flutter/material.dart';

class StackedListTile extends StatelessWidget {
  final Color color;
  final String title;
  final ImageProvider iconImage;

  const StackedListTile({
    Key key,
    @required this.color,
    @required this.title,
    @required this.iconImage,
  })  : assert(color != null),
        super(key: key);

  @override
  Widget build(BuildContext context) {
    return SizedBox(
      height: 90.0,
      child: Stack(
        children: <Widget>[
          Container(
            margin: const EdgeInsets.only(
              left: 18.0,
              top: 18.0,
              right: 18.0,
            ),
            padding: const EdgeInsets.only(
              left: 25.0,
              top: 25.0,
              right: 25.0,
              bottom: 10.0,
            ),
            decoration: BoxDecoration(
              color: color,
              borderRadius: const BorderRadius.only(
                topLeft: Radius.circular(8.0),
                topRight: Radius.circular(8.0),
              ),
            ),
            child: Row(
              children: <Widget>[
                ClipRRect(
                  borderRadius: BorderRadius.circular(5.0),
                  child: AspectRatio(
                    aspectRatio: 1,
                    child: Container(
                      color: Colors.white,
                      child: Image(
                        image: iconImage,
                        fit: BoxFit.cover,
                      ),
                    ),
                  ),
                ),
                const SizedBox(width: 5.0),
                Expanded(
                  child: Text(
                    title,
                    style: const TextStyle(
                      color: Colors.white,
                      letterSpacing: 1.0,
                    ),
                  ),
                ),
                //TODO: Add other stuff here
                const Icon(
                  Icons.arrow_forward_ios,
                  color: Colors.white,
                  size: 20.0,
                ),
              ],
            ),
          ),
          Align(
            alignment: Alignment.bottomCenter,
            child: Container(
              height: 4.0,
              decoration: const BoxDecoration(
                gradient: LinearGradient(
                  colors: [Colors.transparent, Colors.black12],
                  begin: Alignment.topCenter,
                  end: Alignment.bottomCenter,
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }
}

用法：

import 'package:flutter/material.dart';

void main() {
  runApp(
    MaterialApp(
      home: MainPage(),
      debugShowCheckedModeBanner: false,
    ),
  );
}

class MainPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("Demo")),
      body: ListView(
        children: <Widget>[
          StackedListTile(
            title: "Techcombank1",
            color: Colors.blue[600],
            //iconImage: AssetImage("assets/images/1.png"), //TODO: Use this for asset images
            iconImage: NetworkImage(
              "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQfo2BL_di4IK1AuHOS4y_16BatmqdkOlcB1JBjJK2zK9sUvZ2FUg&s",
            ),
          ),
          StackedListTile(
            title: "Techcombank2",
            color: Colors.red[600],
            iconImage: NetworkImage("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQNvzXsqFidC5YqNrKHEJGt1kyC99dJ_EWt_Bcc5dyy4rNGzFk8yQ&s"),
          ),
          StackedListTile(
            title: "Techcombank3",
            color: Colors.green[600],
            iconImage: NetworkImage("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQNvzXsqFidC5YqNrKHEJGt1kyC99dJ_EWt_Bcc5dyy4rNGzFk8yQ&s"),
          ),
          for(int i =0; i<100; i++)
            StackedListTile(
              title: "Item_$i",
              color: Colors.amber.withOpacity(1-(i%10)/10),
              iconImage: NetworkImage("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQNvzXsqFidC5YqNrKHEJGt1kyC99dJ_EWt_Bcc5dyy4rNGzFk8yQ&s"),
            ),
        ],
      ),
    );
  }
}

Answer 2

尝试使用 SliverToBoxAdapter

body: return Container(
      color: Colors.white,
      width: double.infinity,
      child: SingleChildScrollView(
        child: SliverToBoxAdapter(
          child: Stack(
            children: <Widget>[
              Positioned(
                top: 10,
                child: card1(),
              ),
              Positioned(
                bottom: 10,
                child: card1(),
              ),
            ],
          ),
        ),
      ),
    ),