我在将图标按钮与卡片中间对齐时遇到问题。正如您在图片中看到的,图标按钮位于卡片顶部。
如何使其符合卡片的一半尺寸?有什么建议么? (我希望按钮位于卡片的中间)
尝试过:我尝试放置填充或用中心包裹我的 Row 小部件,但它不起作用。
child: new Container(
height: 150.0,
width: MediaQuery.of(context).size.width,
child: new Card(
color: Colors.white,
elevation: 8.0,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Column(
children: [
IconButton(
onPressed: () {},
icon: Icon(Icons.sticky_note_2),
iconSize: 35,
color: Colors.lightBlue),
Text(
"Notes",
style: TextStyle(
color: Colors.black,
fontSize: 15,
),
),
],
),
Column(
children: [
IconButton(
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => QuizRoute()),
);
},
icon: Icon(Icons.quiz),
iconSize: 35,
),
Text(
"Quizzes",
style: TextStyle(
color: Colors.black,
fontSize: 15,
),
),
],
),
Column(
children: [
IconButton(
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => EbooksRoute()),
);
},
icon: Icon(Icons.auto_stories),
iconSize: 35,
),
Text(
"Ebooks",
style: TextStyle(
color: Colors.black,
fontSize: 15,
),
),
],
),
]),
),
),
),
],
),
最佳答案
尝试下面的代码,并将 mainAxisAlignment: MainAxisAlignment.center,
设置为每个 Column
小部件。请参阅layout
和 Align
Container(
height: 150.0,
width: MediaQuery.of(context).size.width,
child: Card(
color: Colors.white,
elevation: 8.0,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
IconButton(
onPressed: () {},
icon: Icon(Icons.sticky_note_2),
iconSize: 35,
color: Colors.lightBlue),
Text(
"Notes",
style: TextStyle(
color: Colors.black,
fontSize: 15,
),
),
],
),
Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
IconButton(
onPressed: () {},
icon: Icon(Icons.quiz),
iconSize: 35,
),
Text(
"Quizzes",
style: TextStyle(
color: Colors.black,
fontSize: 15,
),
),
],
),
Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
IconButton(
onPressed: () {},
icon: Icon(Icons.auto_stories),
iconSize: 35,
),
Text(
"Ebooks",
style: TextStyle(
color: Colors.black,
fontSize: 15,
),
),
],
),
],
),
),
),
关于flutter - 如何对齐卡片小部件 flutter 中的图标按钮?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/75133171/