Стек: покрыть нижний дочерний элемент верхним дочерним элементом
Я хочу наложить виджет на нижний виджет, чтобы скрыть его. поэтому я использую стек. Я не знаю размер нижнего виджета, поэтому не могу указать фиксированный размер верхнего виджета.
что у меня есть:
чего я хочу добиться:
Row(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.start,
children: [
Text(
'Winner: ',
style: TextStyle(fontSize: 34),
),
Stack(
children: [
Text('YOU!!!', style: TextStyle(fontSize: 34)),
Container(
color: Colors.amber,
)
],
),
],
),
Это упрощенная версия того, чего я хочу достичь. Я должен использовать Row и предполагать, что Texts - это любой виджет любого размера.
Размер стека своих дочерних элементов основан на Ограничении, которое он получает от родителя, а не на основе дочерних размеров.
как я могу наложить верхний виджет с точным размером нижнего виджета?
Я думаю, что мне нужно написать собственный RenderObject для расчета размера верхнего дочернего элемента на основе нижнего дочернего элемента.
Ответы 2
Чтобы узнать размер вашего widget и применить вещи в зависимости от этого, вы можете использовать GlobalKey вот так GlobalKey key;. Инициализируйте его в своем initSate и слушайте его размер
GlobalKey key;
double yourWidgetWidth;
double yourWidgetHeight;
@override
initState() {
// .... other stuffs
key = GlobalKey();
WidgetsBinding.instance.addPostFrameCallback((_) {
if (mounted) {
yourWidgetWidth = containerKey.currentContext.size.width;
yourWidgetHeight = containerKey.currentContext.size.height;
}
});
}
А с yourWidgetWidth и yourWidgetHeight можно добиться желаемого
Редактировать Вот концепция того, что я пытаюсь объяснить
// In variable declaration scope
GlobalKey youTextKey = GlobalKey();
ValueNotifier widthNotifier = ValueNotifier(0);
ValueNotifier heightNotifier = ValueNotifier(0);
// In initState
WidgetsBinding.instance.addPostFrameCallback((_) {
if (mounted) {
widthNotifier.value = youTextKey.currentContext.size.width - 1.0;
heightNotifier.value = youTextKey.currentContext.size.height - 5.0;
}
});
// Your row
Row(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.start,
children: [
Text(
'Winner: ',
style: TextStyle(fontSize: 34),
),
Stack(
children: [
Text('YOU!!!', style: TextStyle(fontSize: 34), key: youTextKey,),
ValueListenableBuilder(
valueListenable: widthNotifier,
builder: (context, width, _) {
return ValueListenableBuilder(
valueListenable: heightNotifier,
builder: (context, height, _) {
return Container(
width: width,
height: height,
color: Colors.amber,
);
},
);
},
),
],
),
],
)
Мне нужно разместить виджеты, чтобы узнать их размеры. так что это не полезно. Также я ищу декларативный способ вместо императивного.
Я сталкивался с такими вещами в прошлом. Может быть, вы можете проверить мое новое редактирование
Спасибо за участие, смотрите ответ
Использование Positioned.Fill решило проблему:
Positioned.Fill Создает позиционированный объект с [слева], [сверху], [справа] и [снизу], установленными на 0,0, если для них не передано значение.
поэтому позиционированный дочерний элемент растягивается до краев самого большого дочернего элемента стека.
Row(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.start,
children: [
Text(
'Winner: ',
style: TextStyle(fontSize: 34),
),
Stack(
children: [
Text('YOU!!!', style: TextStyle(fontSize: 34)),
Positioned.fill(
child: Container(
color: Colors.amber,
),
)
],
),
],
),
Действительно, это эффективнее!
это помогает?