Flutter 如何设置行中项目之间的空格相等

发布于04月14日

我在[IconButton，Container-&gt；Text，IconButton]中添加了包含子项的行，但第一个图标和容器之间的间距不等于容器和第二个图标之间的间距.

Row(
                       mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                      children: <Widget>[
                        IconButton(
                            onPressed: () {},
                            icon: Icon(
                              Icons.arrow_circle_left_rounded,
                              size: 55,
                              color: AppColor.purpleColor,
                            )),
                        Container(
                          width: 80,
                          decoration: BoxDecoration(
                              color: AppColor.purpleColor,
                              shape: BoxShape.circle),
                          child: Center(
                              child: Text('33',
                                  style: GoogleFonts.lateef(
                                    textStyle: TextStyle(
                                        color: AppColor.whiteColor,
                                        fontSize: 38),
                                  ))),
                        ),
                        IconButton(
                            onPressed: () {},
                            icon: Icon(
                              Icons.arrow_circle_right_rounded,
                              size: 55,
                              color: AppColor.purpleColor,
                            )),
                      ],
                    ),

我试着用mainAxisAlignment: MainAxisAlignment.spaceEvenly, 我还试过Spacer，SizedBox.同样的问题..

我希望间距相等..

推荐答案

the problem is not with Row but with IconButton

try 将Size值从Icon移动到IconButton

import 'package:flutter/material.dart';

void main() {
  runApp(
    const MaterialApp(
      home: MyApp(),
    ),
  );
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: <Widget>[
            IconButton(
                onPressed: () {},
                iconSize: 55,
                icon: const Icon(
                  Icons.arrow_circle_left_rounded,
                  color: Colors.purple,
                )),
            Container(
              width: 80,
              decoration: const BoxDecoration(
                color: Colors.purple,
                shape: BoxShape.circle,
              ),
              child: const Center(
                  child: Text(
                '33',
              )),
            ),
            IconButton(
                onPressed: () {},
                iconSize: 55,
                icon: const Icon(
                  Icons.arrow_circle_right_rounded,
                  size: 55,
                  color: Colors.purple,
                )),
          ],
        ),
      ),
    );
  }
}