我試圖在一行內實作以下布局（請參見附圖）：
- 一個 TextField，有 3 行
- 一個方形影像容器（縱橫比為 1:1），其中影像具有封面配合
約束：我希望TextField設定行的高度，所以無論字體大小，影像總是方形的，它的高度與TextField的高度相同。
所以我不想使用任何像素大小
這是我的初始代碼，但影像當然不受限制......
關于如何解決這個問題的任何想法？
IntrinsicHeight(
child: Row(
children: [
Flexible(
child: TextField(
controller: _controller,
maxLines: 3,
),
),
Image.file(File(imagePath), fit: BoxFit.cover)
],
),
)
uj5u.com熱心網友回復：
嘗試這個：
IntrinsicHeight(
child: Row(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
Flexible(
child: TextField(
controller: _controller,
maxLines: 3,
),
),
AspectRatio(
aspectRatio: 1,
child: Image.file(File(imagePath), fit: BoxFit.cover, width: 0),
),
],
),
);
uj5u.com熱心網友回復：
在這種情況下，你需要有TextField高度，所以你可以這樣得到GlobalKey：
class TestingDesign2 extends StatefulWidget {
const TestingDesign2({super.key});
@override
State<TestingDesign2> createState() => _TestingDesign2State();
}
class _TestingDesign2State extends State<TestingDesign2> {
GlobalKey textKey = GlobalKey();
double textHeight = 0.0;
@override
void initState() {
super.initState();
WidgetsBinding.instance.addPostFrameCallback((_) {
setState(() {
final textKeyContext = textKey.currentContext;
if (textKeyContext != null) {
final box = textKeyContext.findRenderObject() as RenderBox;
textHeight = box.size.height;
}
});
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(),
body: Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Row(
children: [
Expanded(
child: TextField(
key: textKey,
controller: TextEditingController(),
maxLines: 3,
),
),
SizedBox(
height: textHeight,
child: AspectRatio(
aspectRatio: 1,
child:
Image.asset('assets/images/test.jpeg', fit: BoxFit.cover),
),
),
],
),
],
),
);
}
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/520969.html
標籤：扑镖颤振布局