Flutter: ReorderableListView изменяет ширину элемента и игнорирует закругленные границы

У меня есть ReorderableListView, который содержит контейнеры. Моя проблема в том, что, чтобы быть более красивым (на мой взгляд), мои контейнеры имеют закругленные углы, и они не занимают полную ширину (я добавляю в список отступ).

Проблема в том, что когда я нажимаю 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
                  )
                ]
              )
            )
          ],
        ),
      ),
    );
  }
}
Источник

3 ответа

Решение

Когда выбирается элемент из переупорядочиваемого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?
Источник

Чтобы сохранить BoxDecorations при использовании ReorderableListView, вы должны обернуть его в другой виджет, чтобы удалить белый фон, который выделяет всю строку с фоном, поэтому сделайте это примерно так:

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

)

это удалит фон и сохранит ваши стили оформления.

Источник

ReorderableListViewимеет свойство под названиемproxyDecoratorи используя это, вы можете контролировать, как будет выглядеть ваш виджет во время перетаскивания. Например, чтобы добавить закругленный угол во время перетаскивания, вы можете сделать это.

       ReorderableListView(
      proxyDecorator: (child, index, animation) => Material(
        borderRadius: BorderRadius.circular(12),
        child: child,
      ),
Источник
Другие вопросы по тегам