gpt4 book ai didi

How to Dynamically Increase the Height of a Widget in a Flutter Row Widget Based on Another Flexible Widget(如何基于另一个灵活的小部件动态增加扑动排小部件中小部件的高度)

转载 作者:bug小助手 更新时间:2023-10-27 20:07:30 29 4
gpt4 key购买 nike



I have a layout where there are two children in a Row widget, both of which are flexible widgets. The left side widget contains both red and blue colored widgets, and I want to increase the height of the blue color widget based on the height of the right side widget (which is a flexible widget with a flex value of 7).

我有一个布局,其中Row小部件中有两个子部件,这两个都是灵活的小部件。左侧的小部件包含红色和蓝色的小部件,我希望根据右侧小部件的高度增加蓝色小部件的高度(这是一个灵活的小部件,其FLEX值为7)。


Ex1: The height of the blue color widget to be dynamically adjusted based on the height of the right side widget (with a flex value of 7).

例1:根据右侧小部件的高度动态调整蓝色小部件的高度(灵活值为7)。


Ex2: left side's height = right side's height

例2:左侧的高度=右侧的高度


body: Column(
children: [
Container(color: Colors.green, height: 40),
Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Flexible(
flex: 3,
child: Stack(
alignment: AlignmentDirectional.center,
children: [
Column(
children: [
Container(
color: Colors.red,
height: 20,
),
Container(
color: Colors.blue,
height: 50, // I want to dynamically adjust this height
),
],
),
],
),
),
Flexible(
flex: 7,
child: Container(
color: Colors.yellow,
child: Column(
children: [1, 2, 3]
.map((e) => ListTile(
title: Text('testing - $e'),
))
.toList(),
),
),
),
],
),
Container(color: Colors.grey, height: 50),
],
),

I tried this solution it's working, but I have to rebuild the page after the right side of the widget build. Otherwise, the blue color widget is not visible initially.

我尝试了这个解决方案,它是有效的,但我必须在小部件构建的右侧之后重新构建页面。否则,蓝色小部件最初不可见。


  final rightFlexibleKey = GlobalKey();

// Get the render box
RenderBox? get rightBox => rightFlexibleKey.currentContext?.findRenderObject() as RenderBox?;

// Calculate blue height
double get blueHeight {
if (rightBox != null) {
return rightBox!.size.height - 20;
}
return 0;
}

更多回答
优秀答案推荐

Maybe you'll need IntrinsicHeight.

也许你会需要IntrinsicHeight。


This widget helps its children adjusting their height dependently.
But keep in mind IntrinsicHeight is expensive widget.

这个小工具帮助它的孩子们独立地调整他们的身高。但请记住,IntrinsicHeight是一款昂贵的小工具。


Column(
children: [
Container(color: Colors.green, height: 40),
IntrinsicHeight(
child: Row(
children: [
Flexible(
flex: 3,
child: Column(
children: [
Flexible(
child: Stack( // I don't know why you need Stack here. If you don't need, we can remove Column -> Flexible -> Stack
children: [
Column(
children: [
Container(
color: Colors.red,
height: 20,
),
Flexible(
child: Container(
color: Colors.blue,
),
),
],
),
],
),
),
],
),
),
Flexible(
flex: 7,
child: Container(
color: Colors.yellow,
child: Column(
children: [1, 2, 3]
.map((e) => ListTile(
title: Text('testing - $e'),
))
.toList(),
),
),
),
],
),
),
Container(color: Colors.grey, height: 50),
],
)

更多回答

29 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com