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。