英文:
Flutter Container Dynamic Height
问题
我有一个应用程序，我在其中显示我的笔记。
在左侧，我显示用户选择的颜色，高度为200，具体高度取决于文本大小。如何根据文本大小调整颜色线的高度？
return Container(
margin: const EdgeInsets.all(8.0),
decoration: BoxDecoration(),
child: InkWell(
onTap: () {},
onLongPress: () {},
child: Row(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
width: 8.0,
height: 200.0,
decoration: BoxDecoration(
color: Color((int.parse('0x${list[idx].color}')),
borderRadius: const BorderRadius.only(
bottomLeft: Radius.circular(12.0),
topLeft: Radius.circular(12.0))),
),
Flexible(
child: Container(
margin: const EdgeInsets.all(12.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'标题',
style: TextStyle(
fontSize: 18.0,
fontWeight: FontWeight.w500),
),
const SizedBox(height: 6.0),
Text(
'不，你误解了。最大字符数为150。容器的高度会根据可变文本大小而更改。这是正常的。不同文本大小不会更改左侧的线长度。',
style: TextStyle(
fontSize: 16.0),
),
],
),
),
),
],
),
),
);
英文:
I have an app where I show my notes.
On the left, I show the colors selected by the user with a height of 200 depending on the text size. How can I adjust the height of the color line depending on the text size?
<img src="https://i.stack.imgur.com/AZUms.png" height="400" />
return Container(
margin: const EdgeInsets.all(8.0),
decoration: BoxDecoration(),
child: InkWell(
onTap: () {},
onLongPress: () {},
child: Row(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
width: 8.0,
height: 200.0,
decoration: BoxDecoration(
color: Color((int.parse('0x${list[idx].color}'))),
borderRadius: const BorderRadius.only(
bottomLeft: Radius.circular(12.0),
topLeft: Radius.circular(12.0))),
),
Flexible(
child: Container(
margin: const EdgeInsets.all(12.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'Title',
style: TextStyle(
fontSize: 18.0,
fontWeight: FontWeight.w500),
),
const SizedBox(height: 6.0),
Text(
'No, you misunderstood. The maximum number of characters is 150. Container height changes according to variable text size. That's fine here. What doesn't change with different text size is the line length on the left side.
'
style: TextStyle(
fontSize: 16.0),
),
],
),
),
),
],
),
),
);
答案1
得分: 1
OUTPUT
英文:
This is what you need actually:
SafeArea(
child: Scaffold(
body: Column(
children: [
SizedBox(
height: 100,
),
Padding(
padding: const EdgeInsets.all(20.0),
child: IntrinsicHeight(
child: Card(
margin: EdgeInsets.zero,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10),
),
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
Expanded(
child: Row(
children: [
Container(
decoration: const BoxDecoration(
color: Colors.red,
borderRadius: BorderRadius.only(
bottomLeft: Radius.circular(12.0),
topLeft: Radius.circular(12.0))),
width: 10,
),
const SizedBox(
width: 10,
),
Column(
children: const [
Expanded(
child: Padding(
padding: EdgeInsets.all(10.0),
child: Text(
'****** Long data\n\n\n very very long and lot more \nand \nmore'),
),
),
],
)
],
),
),
],
),
),
),
)
],
),
),
),
OUTPUT
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论