Flutter：ReorderableListView 更改项目宽度，并忽略圆角边框

Question

我有一个ReorderableListView ，其中包含Containers我的问题是，为了更漂亮（在我看来） ，我的容器有圆角，并且它们没有全宽（我在列表中放置了一个填充） 。

问题是当我长按一个元素来重新排序它时，它会自动给它我容器的宽度，忽略填充，并在我的容器周围放置一个阴影（这在我的情况下非常难看）

---

我试图做的事情：

我试图将 ReorderableListView 包装在一个容器中，并在这个容器中放置一个填充而不是 ReorderableListView。 但是我的容器有阴影，这样做会导致裁剪阴影。

---

重现步骤：

import 'package:flutter/material.dart';

void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(home: MyHomePage());
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key}) : super(key: key);
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        child: ReorderableListView(
          padding: EdgeInsets.only(top: 100, left: 15, right: 15),
          onReorder: (oldIndex, newIndex) => {},
          children: <Widget>[
            Container(
              key: ValueKey("1"),
              height: 80,
              margin: EdgeInsets.only(bottom: 15.0),
              decoration: BoxDecoration(
                color: Colors.black,
                borderRadius: BorderRadius.circular(16.0),
                boxShadow: <BoxShadow>[
                  BoxShadow(
                    color: Colors.black12,
                    offset: Offset(1.0, 10.0),
                    blurRadius: 10.0
                  )
                ]
              )
            )
          ],
        ),
      ),
    );
  }
}

Answer 1

当从可重新排序的ListView中提取项目时，它会像通常 ListView 一样占用全部空间。 您需要限制容器的宽度。

（我在列表中添加了一个填充）。

我认为您应该将填充（或任何其他大小限制器，如 Column、SizeBox 等）放在容器中，而不是放在父列表中。

此外，您可能需要使 ValueKey 独一无二。

编辑：

试试这个圆形阴影：

    return Container(
      decoration: BoxDecoration(
        color: Colors.black,
        borderRadius: BorderRadius.circular(16.0),
        boxShadow: <BoxShadow>[
          BoxShadow(
              color: Colors.black12,
              offset: Offset(1.0, 10.0),
              blurRadius: 10.0)
        ],
      ),
      child: Card( // important thing here?

Answer 2

要在使用 ReorderableListView 时保留 BoxDecorations，您必须将其包装在另一个小部件中以删除白色背景，它会选择具有背景的整行，所以请执行以下操作：

Theme(
            data: ThemeData(canvasColor: Colors.transparent),
            child: ReorderableListView.builder(
              shrinkWrap: true,
              itemBuilder: (context, index) {
                return YourWidgetHere(
                  key: ValueKey(whithKey),
                );
              },
              onReorder: (oldIndex, newIndex) {},

)

这将删除背景并保留您的装饰 styles。