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

Question

我有一个 ReorderableListView，其中包含 Containers 我的问题是，为了更漂亮 （在我看来），我的容器有圆角，而且它们不占全宽 （我在里面放了一个填充列表).

问题是当我 LongPress 在一个元素上重新排序时，它会自动给它我容器的宽度，忽略填充，并且 在我的容器周围放置了一个阴影 （这在我的例子中非常丑陋）

我尝试做的事情：

我试图将 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

当从 reorderableListView 中拾取项目时，它像正常 ListView 一样需要完整的 space。您需要限制容器的宽度。

(i put a padding in the list).

我认为您应该将填充（或任何其他大小限制器，如 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?

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

Flutter : ReorderableListView changes item width, and ignores rounded borders

flutter

dart

flutter-widget

reorderable-list

我尝试做的事情：

重现步骤：