如何在Flutter中将小部件与另一个小部件对齐？
如何在Flutter中将小部件与另一个小部件对齐？
提问于 2021-10-23 08:23:01
我有一个用来表示进程的小部件，它是like this的
我需要能够把一个名字放在气泡下面，但是当我这样做的时候：
Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Container(
decoration: BoxDecoration(
shape: BoxShape.circle,
border: Border.all(
color: Colors.green,
width: 1.5,
),
),
height: MediaQuery.of(context).size.height / 10,
width: MediaQuery.of(context).size.width / 10,
child: Center(
child: Icon(
Icons.check,
color: Colors.green,
size: 30,
),
),
),
Text("Test label"),
],
),
我还试着用圆圈把柱子排成一排：
Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Row(
children: [
Container(
padding: EdgeInsets.symmetric(
vertical:
MediaQuery.of(context).size.height / 20,
),
height:
1 + MediaQuery.of(context).size.height / 10,
width: MediaQuery.of(context).size.width / 16,
),
Container(
decoration: BoxDecoration(
shape: BoxShape.circle,
border: Border.all(
color: mainColor,
width: 1.5,
),
),
height: MediaQuery.of(context).size.height / 10,
width: MediaQuery.of(context).size.width / 10,
child: Center(
child: Icon(
Icons.check,
color: mainColor,
size: 30,
),
),
),
Container(
padding: EdgeInsets.symmetric(
vertical:
MediaQuery.of(context).size.height /20,
),
height:
1 + MediaQuery.of(context).size.height / 10,
width: MediaQuery.of(context).size.width / 16,
child: Container(
color: grey,
),
),
],
),
Text("Test label"),
],
),This is better，但仍然会产生问题if the text is bigger
如何在不引起线条问题的情况下在圆圈下对齐文本？
整个小部件的代码(抱歉，它太长了，不知道如何显示它)：
Row(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
padding: EdgeInsets.symmetric(
vertical:
MediaQuery.of(context).size.height / 20,
),
height:
1 + MediaQuery.of(context).size.height / 10,
width: MediaQuery.of(context).size.width / 16,
),
Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Container(
decoration: BoxDecoration(
shape: BoxShape.circle,
border: Border.all(
color: Colors.green,
width: 1.5,
),
),
height: MediaQuery.of(context).size.height / 10,
width: MediaQuery.of(context).size.width / 10,
child: Center(
child: Icon(
Icons.check,
color: Colors.green,
size: 30,
),
),
),
Text("Test label"),
],
),Container(
padding: EdgeInsets.symmetric(
vertical:
MediaQuery.of(context).size.height / 20,
),
height:
1 + MediaQuery.of(context).size.height / 10,
width: MediaQuery.of(context).size.width / 16,
child: Container(
color: Colors.grey,
),
),
Container(
padding: EdgeInsets.symmetric(
vertical: MediaQuery.of(context).size.height / 20,
),
height: 1 + MediaQuery.of(context).size.height / 10,
width: 3 / 2 * MediaQuery.of(context).size.width / 8,
child: Container(
color: Colors.grey,
),
),
Container(
decoration: BoxDecoration(
shape: BoxShape.circle,
border: Border.all(
color: Colors.grey,
width: 1.5,
),
),
height: MediaQuery.of(context).size.height / 10,
width: MediaQuery.of(context).size.width / 10,
),
Container(
padding: EdgeInsets.symmetric(
vertical: MediaQuery.of(context).size.height / 20,
),
height: 1 + MediaQuery.of(context).size.height / 10,
width: MediaQuery.of(context).size.width / 8,
child: Container(
color: Colors.grey,
),
),
Container(
padding: EdgeInsets.symmetric(
vertical: MediaQuery.of(context).size.height / 20,
),
height: 1 + MediaQuery.of(context).size.height / 10,
width: MediaQuery.of(context).size.width / 8,
child: Container(
color: Colors.grey,,
),
),
Container(
decoration: BoxDecoration(
shape: BoxShape.circle,
border: Border.all(
color: Colors.grey,,
width: 1.5,
),
),
height: MediaQuery.of(context).size.height / 10,
width: MediaQuery.of(context).size.width / 10,
)
],
),回答 1
Stack Overflow用户
回答已采纳
发布于 2021-10-23 08:42:55
我建议的一个解决方案是尝试使用ConstrainedBox和Container对文本进行换行，并限制最大宽度。
例如：
ConstrainedBox(
constraints: BoxConstraints(maxWidth: 50),
child: Container(
child: Text('Your Text'),
),
),我认为，如果文本太长而不能放在一行中，则会将文本移到下一行。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/69686350
复制相关文章
相似问题
腾讯云开发者
