Flutter中如何为含单/多位数文本的Container设置统一尺寸？

你的问题源于Container会根据内部文本长度自适应大小，导致单数字和多数字的圆形按钮尺寸不一致。只需给Container设置固定宽高，并让文本居中，就能实现所有按钮尺寸统一。

修改后的圆形按钮组件代码 #

Widget cirbtn(String btntext) {
  return GestureDetector(
    onTap: () {},
    child: Container(
      margin: const EdgeInsets.all(10),
      padding: const EdgeInsets.all(5),
      // 设置固定宽高，保证圆形大小一致
      width: 50,
      height: 50,
      decoration: const BoxDecoration(
        shape: BoxShape.circle,
        color: Colors.cyan,
      ),
      child: Text(
        btntext,
        style: const TextStyle(
          fontSize: 20,
        ),
        // 让文本在容器中居中显示
        textAlign: TextAlign.center,
      ),
    ),
  );
}

完整修改后的代码 #

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyHome(),
    );
  }
}

class MyHome extends StatefulWidget {
  const MyHome({Key? key}) : super(key: key);

  @override
  State<MyHome> createState() => _MyHomeState();
}

class _MyHomeState extends State<MyHome> {
  Widget cirbtn(String btntext) {
    return GestureDetector(
      onTap: () {},
      child: Container(
        margin: const EdgeInsets.all(10),
        padding: const EdgeInsets.all(5),
        width: 50,
        height: 50,
        decoration: const BoxDecoration(
          shape: BoxShape.circle,
          color: Colors.cyan,
        ),
        child: Text(
          btntext,
          style: const TextStyle(
            fontSize: 20,
          ),
          textAlign: TextAlign.center,
        ),
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Center(
          child: Text("NAVEEN'S PROJECT"),
        ),
      ),
      body: Column(
        mainAxisAlignment: MainAxisAlignment.start,
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Row(
            mainAxisAlignment: MainAxisAlignment.start,
            mainAxisSize: MainAxisSize.min,
            children: [
              cirbtn("1"),
              cirbtn("2"),
              cirbtn("3"),
              cirbtn("4"),
              cirbtn("5"),
              cirbtn("6"),
              cirbtn("7"),
            ],
          ),
          Row(
            mainAxisAlignment: MainAxisAlignment.start,
            mainAxisSize: MainAxisSize.min,
            children: [
              cirbtn("8"),
              cirbtn("9"),
              cirbtn("10"),
              cirbtn("11"),
              cirbtn("12"),
              cirbtn("13"),
              cirbtn("14"),
            ],
          ),
          Row(
            mainAxisAlignment: MainAxisAlignment.start,
            mainAxisSize: MainAxisSize.min,
            children: [
              cirbtn("15"),
              cirbtn("16"),
              cirbtn("17"),
              cirbtn("18"),
              cirbtn("19"),
              cirbtn("20"),
              cirbtn("21"),
            ],
          ),
          Row(
            mainAxisAlignment: MainAxisAlignment.start,
            mainAxisSize: MainAxisSize.min,
            children: [
              cirbtn("22"),
              cirbtn("23"),
              cirbtn("24"),
              cirbtn("25"),
              cirbtn("26"),
              cirbtn("27"),
              cirbtn("28"),
            ],
          ),
          Row(
            children: [
              cirbtn("29"),
              cirbtn("30"),
              cirbtn("31"),
            ],
          ),
        ],
      ),
    );
  }
}

你可以根据实际需求调整width和height的数值，确保所有圆形按钮大小一致，同时文本能在按钮内正常显示。

内容的提问来源于stack exchange，提问作者naveen