在Flutter中列对齐不起作用,控制台中无错误

lymnna71  于 2023-01-14  发布在  Flutter
关注(0)|答案(2)|浏览(187)

为什么列中的元素没有对齐?我尝试了不同的mainAxisSize和mainAxisAlignment值,但没有任何变化,所有文本都停留在顶部。告诉我如何解决此问题?
密码-

Column(
                mainAxisSize: MainAxisSize.max,
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Text(text, style: TextStyle(color: ConfigColor.grey, fontSize: 16, fontWeight: FontWeight.w400),),
                  Text(text, style: TextStyle(color: ConfigColor.grey, fontSize: 16, fontWeight: FontWeight.w400),),
                  Text(text, style: TextStyle(color: ConfigColor.grey, fontSize: 16, fontWeight: FontWeight.w400),),

结果-

完整代码-

var text = 'Эти данные нужны нам для того, чтобы мы могли выбрать наиболее подходящие для вас макеты.';

class FullName extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: ConfigColor.background,
      body: SafeArea(
        child: Container(
          margin: const EdgeInsets.symmetric(horizontal: 12),
          child: Column(
            children: [
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  IconButton(
                      onPressed: () {
                        context.go('/sendCode');
                      },
                      icon: const Icon(Icons.chevron_left)
                  ),
                  Text('Как вас зовут?', style: TextStyle(color: ConfigColor.textBlack, fontWeight: FontWeight.w500, fontSize: 19),),
                  const SizedBox(width: 24,),
                ],
              ),

              Column(
                mainAxisSize: MainAxisSize.max,
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Text(text, style: TextStyle(color: ConfigColor.grey, fontSize: 16, fontWeight: FontWeight.w400),),
                  Text(text, style: TextStyle(color: ConfigColor.grey, fontSize: 16, fontWeight: FontWeight.w400),),
                  Text(text, style: TextStyle(color: ConfigColor.grey, fontSize: 16, fontWeight: FontWeight.w400),),
                  
                ],
              )
            ],
          )
        )
      ),
    );
  }
}
goucqfw6

goucqfw61#

请试试这个

class FullName extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      // backgroundColor: Colors.black,
      body: SafeArea(
          child: Container(
              margin: const EdgeInsets.symmetric(horizontal: 12),
              child: Column(
                children: [
                  Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: [
                      IconButton(
                          onPressed: () {
                            // context.go('/sendCode');
                          },
                          icon: const Icon(Icons.chevron_left)),
                      const Text(
                        'Как вас зовут?',
                        style: TextStyle(
                            color: Colors.black,
                            fontWeight: FontWeight.w500,
                            fontSize: 19),
                      ),
                      const SizedBox(
                        width: 24,
                      ),
                    ],
                  ),
                  Expanded(
                    child: Column(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: [
                        Text(
                          text,
                          style: const TextStyle(
                              color: Colors.black,
                              fontSize: 16,
                              fontWeight: FontWeight.w400),
                        ),
                        Text(
                          text,
                          style: const TextStyle(
                              color: Colors.black,
                              fontSize: 16,
                              fontWeight: FontWeight.w400),
                        ),
                        Text(
                          text,
                          style: const TextStyle(
                              color: Colors.black,
                              fontSize: 16,
                              fontWeight: FontWeight.w400),
                        ),
                      ],
                    ),
                  )
                ],
              ))),
    );
  }
}

xa9qqrwz

xa9qqrwz2#

根据您提供的代码片段,问题可能出在Column小部件的mainAxisSize属性上。您将其设置为MainAxisSize.max,这将导致Column在主轴中占用尽可能多的空间(在本例中为垂直)。这意味着Column将与其父代一样高,即使其子代没有占用所有空间。
尝试将mainAxisSize设置为MainAxisSize.min,这应会导致Column与其主轴中的子级一样小。您也可以尝试MainAxisSize.min并调整mainAxisAlignment以正确对齐元素。

Column(
  mainAxisSize: MainAxisSize.min,
  mainAxisAlignment: MainAxisAlignment.center,
  children: [
    Text(text, style: TextStyle(color: ConfigColor.grey, fontSize: 16, fontWeight: FontWeight.w400),),
    Text(text, style: TextStyle(color: ConfigColor.grey, fontSize: 16, fontWeight: FontWeight.w400),),
    Text(text, style: TextStyle(color: ConfigColor.grey, fontSize: 16, fontWeight: FontWeight.w400),),
  ]
)

如果你想让它们保持在顶部,另一个选择是在列周围添加一些填充,如下所示:

Padding(
  padding: const EdgeInsets.all(8.0),
  child: Column(
    mainAxisSize: MainAxisSize.max,
    mainAxisAlignment: MainAxisAlignment.start,
    children: [
      Text(text, style: TextStyle(color: ConfigColor.grey, fontSize: 16, fontWeight: FontWeight.w400),),
      Text(text, style: TextStyle(color: ConfigColor.grey, fontSize: 16, fontWeight: FontWeight.w400),),
      Text(text, style: TextStyle(color: ConfigColor.grey, fontSize: 16, fontWeight: FontWeight.w400),),
    ]
  )
)

需要注意的是,由于text变量是相同的,它将显示相同的文本三次,如果不同,它将正确对齐。

相关问题