如何解决Flutter:使具有不同图标大小的图标按钮和行中的文本元素对齐到中心
我在 Flutter 应用中有这个 Row
小部件和一些 IconButton
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,children: [
IconButton(
icon: Icon(Icons.skip_prevIoUs,color: Colors.Amber,size: 35),onpressed: () {
setState(() {
pageIndex = 1;
});
}),IconButton(
icon: Icon(Icons.arrow_left,size: 45),onpressed: decIndex),Text('Page $pageIndex',textAlign: TextAlign.center,style: TextStyle(
color: Colors.Amber,fontSize: 20,fontWeight: FontWeight.bold)),IconButton(
icon: Icon(Icons.arrow_right,onpressed: () {
incIndex(pageNumbers);
}),IconButton(
icon: Icon(Icons.skip_next,onpressed: () {
setState(() {
pageIndex = pageNumbers;
});
}),IconButton(
icon: Icon(Icons.location_searching,onpressed: () {
setState(() {
pageIndex = userPage;
});
}),],),
如下图所示:
红线只是为了区分高差
我想让所有项目通过它们的中心在同一条线上对齐。 我该怎么做?
解决方法
在 size
上使用 Icon
参数对于 IconButton
小部件不是一个很好的方法。
您的图标变得越来越大,而 IconButton
无法适应扩大后的尺寸,从而导致图标溢出。
相反,在 iconSize
上使用 IconButton
参数,并为 Icon
赋予相同的值并将其从 Icon
中删除。
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,children: [
IconButton(
iconSize: 35,icon: Icon(Icons.skip_previous,color: Colors.amber),onPressed: () {
setState(() {
pageIndex = 1;
});
}
),IconButton(
iconSize: 45,icon: Icon(Icons.arrow_left,onPressed: decIndex
),Text('Page $pageIndex',textAlign: TextAlign.center,style: TextStyle(
color: Colors.amber,fontSize: 20,fontWeight: FontWeight.bold)),icon: Icon(Icons.arrow_right,onPressed: () {
incIndex(pageNumbers);
}),IconButton(
iconSize: 35,icon: Icon(Icons.skip_next,onPressed: () {
setState(() {
pageIndex = pageNumbers;
});
}),icon: Icon(Icons.location_searching,onPressed: () {
setState(() {
pageIndex = userPage;
});
}
)
],),
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。