Question

我基本上想将卡片堆叠/重叠在列表视图中，并同时使它们不可用。我只是不知道在整个示例here中应该在哪里添加堆栈小部件，以便所有卡/列表项都堆叠在一起并且一次可以丢弃。

<input type="text" value="{{myObservable$ | async}}?.color"></input>

Answer 1

很漂亮，但这是一个可以帮助您入门的示例：）

import 'package:flutter/material.dart';

void main() => runApp(new MyApp());

class MyApp extends StatefulWidget {
  @override
  State<MyApp> createState() {
    return MyAppState();
  }
}

class MyAppState extends State<MyApp> {
  final items = List<String>.generate(3, (i) => "Item ${i + 1}");

  @override
  Widget build(BuildContext context) {
    final title = 'Dismissing Items';

    return MaterialApp(
      title: title,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text(title),
        ),
        body: Builder(builder: (BuildContext context) {
          return Center(
              child: Stack(
            children: _buildCards(context),
          ));
        }),
      ),
    );
  }

  List<Widget> _buildCards(BuildContext context) {
    var cards = List<Widget>();
    for (String item in items) {
      cards.add(Dismissible(
          key: Key(item),
          background: Container(
            alignment: Alignment.centerRight,
            padding: EdgeInsets.only(right: 16.0),
            color: Colors.red,
            child: Row(
              mainAxisAlignment: MainAxisAlignment.end,
              children: <Widget>[
                Text('Dismiss',
                    style: Theme
                        .of(context)
                        .primaryTextTheme
                        .subhead
                        .copyWith(color: Colors.white)),
                Icon(
                  Icons.delete,
                  color: Colors.white,
                ),
              ],
            ),
          ),
          direction: DismissDirection.endToStart,
          child: Container(
            color: Colors.blue,
            child: SizedBox(
              height: 50.0,
              width: 200.0,
              child: Text(item),
            ),
          ),
          // Each Dismissible must contain a Key. Keys allow Flutter to
          // uniquely identify Widgets. key: Key(item),
          // We also need to provide a function that tells our app
          // what to do after an item has been swiped away.
          onDismissed: (direction) {
            // Remove the item from our data source.
            setState(() {
              items.remove(item);
            });
            // Then show a snackbar!
            Scaffold
                .of(context)
                .showSnackBar(SnackBar(content: Text("$item dismissed")));
          }));
    }

    return cards;
  }
}

Answer 2

您可以这样使用：

Widget _buildContactRow(Contact contact) {
return new Dismissible(
  key: Key(contact.id),
  child: new GestureDetector(
    onTap: () {
      _heroAnimation(contact);
    },
    child: new Card(
      margin: EdgeInsets.only(top: 10.0, bottom: 10.0),
      child: new Container(
        child: new Column(
          children: <Widget>[
            new Row(
              children: <Widget>[
                contactAvatar(contact),
                contactDetails(contact)
              ],
            ),
          ],
        ),
        margin: EdgeInsets.all(10.0),
      ),
    ),
  ),
  onDismissed: (direction) {
    setState(() {
      if (direction == DismissDirection.endToStart) {
      //Do something
      } else {
       //Do something
      }
    });
  },
  direction: DismissDirection.horizontal,

);

}

将堆栈小部件添加到可忽略列表视图

2 个答案: