【问题标题】:Flutter : ReorderableListView changes item width, and ignores rounded bordersFlutter:ReorderableListView 更改项目宽度,并忽略圆角边框
【发布时间】:2020-09-07 08:27:41
【问题描述】:

我有一个 ReorderableListView,其中包含 Containers 我的问题是,为了更漂亮(在我看来),我的容器有圆角,并且它们不占用全宽(我在列表中添加了填充) em>。

问题是,当我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
                  )
                ]
              )
            )
          ],
        ),
      ),
    );
  }
}

【问题讨论】:

    标签: flutter dart flutter-widget reorderable-list


    【解决方案1】:

    当从 reorderableListView 中提取项目时,它会像通常 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?
    

    【讨论】:

    • 确实,将我的元素包装在 SizedBox 中解决了宽度问题...它在 ClipRRect()
    • 更新了答案,在 Card 中包装容器子项以制作圆形阴影,在不同但非常相似的示例中对我有用。
    • 对于圆形阴影,我说的是当你拿起 ReorderableListView 的一个元素时。我看不到添加 Card() 子元素会如何改变所选元素的阴影外观
    猜你喜欢
    • 2019-12-08
    • 2014-02-19
    • 1970-01-01
    • 2017-12-29
    • 1970-01-01
    • 2016-07-25
    • 2021-04-28
    • 1970-01-01
    相关资源
    最近更新 更多