#dart #flutter
#dart #flutter
Вопрос:
Когда я создаю контейнер с тенью ящика внутри ListView (прокручивается по горизонтали), тень выглядит нормально, но когда я добавляю несколько контейнеров внутри ListView, их тени (просто тени, а не контейнер) обрезаются сверху и снизу.
Пожалуйста, также обратите внимание, что весь этот ListView помещен в родительский контейнер.
Я попытался увеличить высоту родительского контейнера (в который упакован весь ListView), но это увеличивает высоту дочернего контейнера, тень которого все еще обрезана.
Я также пытался добавить дополнение к родительскому контейнеру, но тень все равно обрезается.
Возможно, мне нужно обернуть ListView внутри любого другого виджета, который может выполнить работу без проблем.
Container(
// padding: EdgeInsets.only(left: 30.0, right: 0.0),
height: 140.0,
child: ListView(
scrollDirection: Axis.horizontal,
children: <Widget>[
SizedBox(
width: 30.0,
),
Container(
//This is actual custom Card
width: 340.0,
height: 140.0,
decoration: BoxDecoration(
boxShadow: [
BoxShadow(
color: Colors.black12,
offset: Offset.zero,
blurRadius: 10.0,
spreadRadius: 0.0,
)
],
color: Colors.white,
borderRadius: BorderRadius.circular(10.0),
),
child: Row(
children: <Widget>[
Container(
padding: EdgeInsets.fromLTRB(
30.0, 20.0, 25.0, 20.0),
child: Image.asset(
'assets/images/leather_boot.png'),
),
Container(
padding:
EdgeInsets.only(top: 30.0, bottom: 30.0),
child: Column(
crossAxisAlignment:
CrossAxisAlignment.start,
children: <Widget>[
Text(
'BadAss Genuine',
style: TextStyle(
color: Colors.black,
fontWeight: FontWeight.w500,
fontSize: 18.0,
),
),
SizedBox(
height: 3.0,
),
Text(
'Leather Boots',
style: TextStyle(
color: Colors.black,
fontWeight: FontWeight.w500,
fontSize: 18.0,
),
),
SizedBox(
height: 12.0,
),
Container(
height: 1.5,
width: 150.0,
color: Color(0xff643523),
),
],
),
),
],
),
),
SizedBox(
width: 30.0,
),
Container(
//This is actual custom Card
width: 340.0,
height: 140.0,
decoration: BoxDecoration(
boxShadow: [
BoxShadow(
color: Colors.black12,
offset: Offset.zero,
blurRadius: 10.0,
spreadRadius: 0.0,
)
],
color: Colors.white,
borderRadius: BorderRadius.circular(10.0),
),
child: Row(
children: <Widget>[
Container(
padding: EdgeInsets.fromLTRB(
30.0, 20.0, 25.0, 20.0),
child: Image.asset(
'assets/images/leather_boot.png'),
),
Container(
padding:
EdgeInsets.only(top: 30.0, bottom: 30.0),
child: Column(
crossAxisAlignment:
CrossAxisAlignment.start,
children: <Widget>[
Text(
'BadAss Genuine',
style: TextStyle(
color: Colors.black,
fontWeight: FontWeight.w500,
fontSize: 18.0,
),
),
SizedBox(
height: 3.0,
),
Text(
'Leather Boots',
style: TextStyle(
color: Colors.black,
fontWeight: FontWeight.w500,
fontSize: 18.0,
),
),
SizedBox(
height: 12.0,
),
Container(
height: 1.5,
width: 150.0,
color: Color(0xff643523),
),
],
),
),
],
),
),
SizedBox(
width: 30.0,
),
],
),
),
Я ожидаю, что в ListView контейнеры (в виде пользовательских карточек) будут иметь надлежащую boxShadow, но в фактическом выводе boxShadow контейнеров обрезается как сверху, так и снизу.
Ответ №1:
Как писал @Zahra,
добавление clipBehavior: Clip.none, в ListView , решило проблему.
Обрезка происходит только тогда, когда ваши виджеты превышают размер экрана
Ответ №2:
Хорошо, я нашел решение самостоятельно.
Шаги по устранению проблемы
-
Создайте несколько контейнеров (в виде карточек) некоторой ширины и с boxShadow радиуса 10.0. Давайте назовем это дочерним контейнером.
-
Создайте ListView с горизонтальной осью прокрутки. Поместите дочерние контейнеры, сделанные выше, в этот ListView.
-
Теперь оберните ListView внутри нового контейнера (назовем его родительским контейнером), чтобы придать ListView высоту. Если вы хотите, чтобы ваши дочерние контейнеры имели высоту 140.0, тогда сделайте высоту вашего родительского контейнера 160.0, которая включает радиус boxShadow 10.0 сверху и снизу каждый (10.0 140.0 10.0 ).
-
Теперь добавьте дополнение к вашему ListView версии 10.0 как сверху, так и снизу.
-
Проблема решена (глупый я).
Пример кода здесь
Container(
height: 160.0,
child: ListView(
padding: EdgeInsets.only(top: 10.0, bottom: 10.0),
shrinkWrap: true,
scrollDirection: Axis.horizontal,
children: <Widget>[
SizedBox(
width: 30.0,
),
Container(
width: 340.0,
// height: 140.0,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(10.0),
boxShadow: [
BoxShadow(
blurRadius: 10.0,
color: Colors.black12,
)
],
),
child: Row(
children: <Widget>[
Container(
padding: EdgeInsets.fromLTRB(
30.0, 20.0, 25.0, 20.0),
child: Image.asset(
'assets/images/leather_boot.png'),
),
Container(
padding:
EdgeInsets.only(top: 20.0, bottom: 20.0),
child: Column(
crossAxisAlignment:
CrossAxisAlignment.start,
children: <Widget>[
Text(
'BadAss Genuine',
style: TextStyle(
color: Colors.black,
fontWeight: FontWeight.w400,
fontSize: 18.0,
),
),
SizedBox(
height: 3.0,
),
Text(
'Leather Boots',
style: TextStyle(
color: Colors.black,
fontWeight: FontWeight.w400,
fontSize: 18.0,
),
),
SizedBox(
height: 12.0,
),
Container(
height: 1.0,
width: 150.0,
color: Color(0xff643523),
),
SizedBox(
height: 12.0,
),
Row(
children: <Widget>[
SizedBox(
width: 110.0,
),
Container(
height: 30.0,
width: 30.0,
child: Image.asset(
'assets/images/boot.png'),
),
],
),
],
),
),
],
),
),
SizedBox(
width: 30.0,
),
Container(
//This is actual custom Card
width: 340.0,
// height: 140.0,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(10.0),
boxShadow: [
BoxShadow(
blurRadius: 10.0,
color: Colors.black12,
)
],
),
child: Row(
children: <Widget>[
Container(
padding: EdgeInsets.fromLTRB(
30.0, 20.0, 25.0, 20.0),
child:
Image.asset('assets/images/gloves.png'),
),
Container(
padding:
EdgeInsets.only(top: 20.0, bottom: 20.0),
child: Column(
crossAxisAlignment:
CrossAxisAlignment.start,
children: <Widget>[
Text(
'Highly Durable',
style: TextStyle(
color: Colors.black,
fontWeight: FontWeight.w400,
fontSize: 18.0,
),
),
SizedBox(
height: 3.0,
),
Text(
'Riding Gloves',
style: TextStyle(
color: Colors.black,
fontWeight: FontWeight.w400,
fontSize: 18.0,
),
),
SizedBox(
height: 12.0,
),
Container(
height: 1.0,
width: 150.0,
color: Color(0xff643523),
),
SizedBox(
height: 12.0,
),
Row(
children: <Widget>[
SizedBox(
width: 110.0,
),
Container(
height: 30.0,
width: 30.0,
child: Image.asset(
'assets/images/glove.png'),
),
],
),
],
),
),
],
),
),
SizedBox(
width: 30.0,
),
Container(
//This is actual custom Card
width: 340.0,
// height: 140.0,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(10.0),
boxShadow: [
BoxShadow(
blurRadius: 10.0,
color: Colors.black12,
)
],
),
child: Row(
children: <Widget>[
Container(
padding: EdgeInsets.fromLTRB(
30.0, 20.0, 25.0, 20.0),
child:
Image.asset('assets/images/helmet.png'),
),
Container(
padding:
EdgeInsets.only(top: 20.0, bottom: 20.0),
child: Column(
crossAxisAlignment:
CrossAxisAlignment.start,
children: <Widget>[
Text(
'German Hat',
style: TextStyle(
color: Colors.black,
fontWeight: FontWeight.w400,
fontSize: 18.0,
),
),
SizedBox(
height: 3.0,
),
Text(
'Riding Helmet',
style: TextStyle(
color: Colors.black,
fontWeight: FontWeight.w400,
fontSize: 18.0,
),
),
SizedBox(
height: 12.0,
),
Container(
height: 1.0,
width: 150.0,
color: Color(0xff643523),
),
SizedBox(
height: 12.0,
),
Row(
children: <Widget>[
SizedBox(
width: 110.0,
),
Container(
height: 30.0,
width: 30.0,
child: Image.asset(
'assets/images/helmeticon.png'),
),
],
),
],
),
),
],
),
),
SizedBox(
width: 30.0,
),
],
),
),
Комментарии:
1. Это приведет к увеличению разрыва между ListView и другими виджетами в том же столбце или строке.
2. Вы можете использовать опцию clip внутри ListView, установив значение clip равным none :
clipBehavior: Clip.none
Ответ №3:
В моем случае свойство clip Behavior помогло отобразить тени. Однако это свойство создавало большие проблемы: элементы ListView при прокрутке начали наезжать на соседние виджеты.
Я думаю, что для решения проблемы правильнее обернуть элементы списка (виджеты с тенями) в контейнер со свойством margin. Это свойство создано для этой цели. Установите значение свойства равным размеру тени.
Container(
margin: const EdgeInsets.symmetric(horizontal: 2.0),
child: MyListViewElement ...