android Flutter：可凭卡和保证金解雇

yhxst69z 于 2022-12-16 发布在 Android

关注(0)|答案(3)|浏览(146)

我在Flutter中构建了一个简单的listView，其中的“单元格”是带有固定边距的简单卡片。当删除这些卡片时，“边距”会覆盖可删除的背景，从而导致难看的设计。我创建了一个示例应用程序来演示这个问题：

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

void main() {
  runApp(MyApp());
}

// MyApp is a StatefulWidget. This allows updating the state of the
// widget when an item is removed.
class MyApp extends StatefulWidget {
  MyApp({Key key}) : super(key: key);

  @override
  MyAppState createState() {
    return MyAppState();
  }
}

class MyAppState extends State<MyApp> {
  final items = List<String>.generate(20, (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: ListView.builder(
          itemCount: items.length,
          itemBuilder: (context, index) {
            final item = items[index];

            return Dismissible(
              // Each Dismissible must contain a Key. Keys allow Flutter to
              // uniquely identify widgets.
              key: Key(item),
              // Provide a function that tells the app
              // what to do after an item has been swiped away.
              onDismissed: (direction) {
                // Remove the item from the data source.
                setState(() {
                  items.removeAt(index);
                });

                // Then show a snackbar.
                Scaffold.of(context)
                    .showSnackBar(SnackBar(content: Text("$item dismissed")));
              },
              // Show a red background as the item is swiped away.
              background: Container(color: Colors.red),
              child: Card(color: Colors.blue, margin: EdgeInsets.all(9), child: ListTile(title: Text('$item'))),
            );
          },
        ),
      ),
    );
  }
}

这会在消除时产生以下设计：

也不可能把可撤销的卡放进卡里，因为你不会把卡刷走。这是Flutter的一个bug还是有更简单的解决方案？

android

来源：https://stackoverflow.com/questions/62801515/flutter-dismissable-with-card-and-margin

3条答案

按热度按时间

to94eoyn1#

一个简单的解决方案只是设置卡边距为0
替换到此卡

child: Card(color: Colors.blue, margin: EdgeInsets.all(0), child: 
ListTile(title: Text('$item'),)

如果你想在项目之间留一个空格，你可以添加SizedBox或者把Dismissible放在一个Padding上并设置一个值

赞(0）回复(0）举报 2022-12-16

pbwdgjma2#

在Dismissible的background: Container(...)小部件中，可以添加与Card小部件相同的边距。
例如background: Container(color: Colors.red, margin: EdgeInsets.all(9))

赞(0）回复(0）举报 2022-12-16

gcuhipw93#

首先尝试用另一个小部件 Package Dismissible，以便保留它们周围的空间，例如使用填充

@override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.only(
        left: 16,
        right: 16,
      ),
      child: Dismissible(...),
    );
  }
}

然后我们实现Dismissible小部件的内部部分，添加一个在滑动元素时呈现的容器，并且不要忘记呈现要滑动的元素本身

@override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.only(
        left: 16,
        right: 16,
      ),
      child: Dismissible(
        key: ValueKey(id),
        background: Container(

        // most importantly, do not forget to give the inner container a 
        // padding to the right so that our icon does not stick to the 
        // wall of the container when swiping

          padding: const EdgeInsets.only(
            right: 16,
          ),
          color: Theme.of(context).colorScheme.error,
          alignment: Alignment.centerRight,
          child: const Icon(
            Icons.delete,
            color: Colors.white,
          ),
        ),
        child: Card(

          // also if you use a card as an element that will swipe then 
          // you need to remove its default space

          margin: const EdgeInsets.all(0),
          child: ListTile(...),
      ),
    );
  }
}

希望这有帮助！）

赞(0）回复(0）举报 2022-12-16

我来回答

android Flutter：可凭卡和保证金解雇

3条答案

相关问题

热门标签

最新问答