У меня проблемы с правильным расположением макета ... Мне нужен более продвинутый элемент в ListView.
Если вы видите этот скриншот:
Мое намерение состояло в том, чтобы фоновое изображение (самый низкий / первый элемент в стопке) растягивалось и заполняло всю высоту, а синий цвет в верхней части должен был быть внизу с небольшим отступом, поэтому он немного приподнимается из bottom.
Чтение о стеке Я думал, что все элементы стека получат высоту самого большого элемента стека, поэтому я предположил, что мы увидим, что красный Контейнер также заполнит дно, и все это должно работать, но это не так. , Конечно же, я могу заставить все это работать, если мой предмет имеет фиксированную высоту, но это не так.
Как я могу заставить что-либо занять полный рост внутри элемента стека, чтобы он соответствовал самой большой высоте?
Вот код. Сначала точка входа ко всему этому (ListView):
Widget _listView(BuildContext context, MyLoanOverview loanOverview) {
return ListView.builder(
padding: const EdgeInsets.all(16),
itemCount: loanOverview.houses.length,
itemBuilder: (BuildContext context, int index) {
return _houseCard(context, loanOverview.houses[index]);
});
}
Widget _houseCard(BuildContext context, House house) {
GlobalKey _key = GlobalKey();
return Container(
key: _key,
child: InkWell(
onTap: () => _cardTap(_key, context, house),
child: HouseCard(house: house),
),
);
}
Виджет HouseCard (извините за разделение, части используются повторно или будут в любом случае):
class HouseCard extends StatefulWidget {
final House house;
const HouseCard({Key key, this.house}) : super(key: key);
@override
State<StatefulWidget> createState() => _CardState();
}
class _CardState extends State<HouseCard> {
@override
Widget build(BuildContext context) {
return Card(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(16.0),
),
semanticContainer: true,
clipBehavior: Clip.antiAliasWithSaveLayer,
child: HouseCardContent(house: widget.house, isFullscreen: false),
elevation: 4,
);
}
}
И затем последний, большой:
class HouseCardContent extends StatefulWidget {
final House house;
final bool isFullscreen;
const HouseCardContent({Key key, this.house, this.isFullscreen}) : super(key: key);
@override
State<StatefulWidget> createState() => _CardState();
}
class _CardState extends State<HouseCardContent> {
void _onOpenClosePressed() {
di<EventBus>().fire(FullScreenCardEvent(null, null, null, null, false));
}
@override
Widget build(BuildContext context) {
return Container(
color: Colors.green,
child: Stack(
children: <Widget>[
ImageHelper.getHouseCategoryImage(widget.house.houseCategory),
Container(
color: Colors.red,
child: Padding(
padding: const EdgeInsets.only(bottom:10.0),
child: Align(
alignment: Alignment.bottomLeft,
child: Container(
color: Colors.blue,
height: 20,
),
),
),
),
Padding(
padding: const EdgeInsets.fromLTRB(12, 8, 12, 8),
child: Align(
alignment: Alignment.topLeft,
child: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Row(
children: <Widget>[
Expanded(
child: Text(
widget.house.addressStreet,
style: TextStyle(fontSize: 26, fontWeight: FontWeight.bold, color: Colors.white),
),
),
Align(
alignment: Alignment.centerRight,
child: IconButton(icon: Image.asset(widget.isFullscreen ? 'assets/images/button_collapse.png' : 'assets/images/button_expand.png'), onPressed: widget.isFullscreen ? () => _onOpenClosePressed() : null),
)
],
),
SizedBox(
height: 56,
),
Row(
children: <Widget>[
Expanded(
child: Text(
'Boligværdi',
style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold, color: Colors.white),
),
),
Align(
alignment: Alignment.centerRight,
child: Text(
'4.233.123',
style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold, color: Colors.white),
),
)
],
),
SizedBox(
height: 32,
),
Padding(
padding: const EdgeInsets.only(bottom: 8.0),
child: Container(
height: 60,
decoration: BoxDecoration(color: Color(0xFFFFFFFF), borderRadius: BorderRadius.circular(10.0)),
),
),
Padding(
padding: const EdgeInsets.only(bottom: 8.0),
child: Container(
height: 60,
decoration: BoxDecoration(color: Color(0xFFFFFFFF), borderRadius: BorderRadius.circular(10.0)),
),
),
Padding(
padding: const EdgeInsets.only(bottom: 8.0),
child: Container(
height: 60,
decoration: BoxDecoration(color: Color(0xFFFFFFFF), borderRadius: BorderRadius.circular(10.0)),
),
),
Padding(
padding: const EdgeInsets.only(bottom: 8.0),
child: Container(
height: 60,
decoration: BoxDecoration(color: Color(0xFFFFFFFF), borderRadius: BorderRadius.circular(10.0)),
),
),
Padding(
padding: const EdgeInsets.only(bottom: 8.0),
child: Container(
height: 60,
decoration: BoxDecoration(color: Color(0xFFFFFFFF), borderRadius: BorderRadius.circular(10.0)),
),
),
Padding(
padding: const EdgeInsets.only(bottom: 8.0),
child: Container(
height: 60,
decoration: BoxDecoration(color: Color(0xFFFFFFFF), borderRadius: BorderRadius.circular(10.0)),
),
)
],
),
),
)
],
),
);
}
}
Спасибо
Søren