Question

我有这两个项目，曾经需要出现在中间，而另一个则需要移到底部。

import 'package:flutter/material.dart';

class WelcomeScreen extends StatelessWidget {
 @override
 Widget build(BuildContext context) {
  return Container(
   color: Colors.blue,
   child: Column(
    mainAxisAlignment: MainAxisAlignment.center,
    children: [
      Text(
        'K',
        style: TextStyle(
          fontSize: 200,
          color: Colors.white,
          decoration: TextDecoration.none,
          fontStyle: FontStyle.italic,
        ),
      ),
      Column(
        mainAxisAlignment: MainAxisAlignment.end,
        children: [Text('hello')],
      )
    ],
  ),
 );
 }
}

这是它的外观。

我想将“ Hello Text”移到底部。我该怎么办？

Answer 1

您需要使用两件事来使其更有效地工作。这些是：

Expanded Class->这将提供空间，即占用剩余空间
Align class->这将帮助您对齐项目

请注意： Align()本身不能对齐该项目，除非给出空格。如果仅使用Align()，则不会看到任何更改，因为cos Text('Hello')在寻找空间，但是那里没有空间。

代码

      Container(
       width: double.infinity,  // <-- Takes up total width of the device
       height: double.infinity, // <-- Takes up the total height of the device
       color: Colors.blue,
       child: Column(
        children: [
          Expanded(
            flex: 2, // <-- Flex takes care of the remaining space ratio
            child: Center(
              child: Text(
                'K',
                style: TextStyle(
                  fontSize: 200,
                  color: Colors.white,
                  decoration: TextDecoration.none,
                  fontStyle: FontStyle.italic,
                ),
              )
            )
          ),
          Align(
            alignment: Alignment.bottomCenter,
            child: Text('Hello', style: TextStyle(color: Colors.white, fontSize: 17.0))
          )
        ]
      )
     )

结果

Answer 2

如果您不希望K文本在顶部移动，则必须使用Stack。这样，您的内部小部件可以将自己定位在所需的任何位置。

Stack(
alignment:Alignment.center,
children:[
Text("K"),
Align(
alignment:Alignment.bottomCenter,
child:Text("hello"),
),
]
),

在此处查看堆栈小部件：https://www.youtube.com/watch?v=liEGSeD3Zt8

Answer 3

return Container(
  color: Colors.blue,
  child: Column(
    mainAxisAlignment: MainAxisAlignment.center,
    children: [
      Spacer(),
      Text(
        'K',
        style: TextStyle(
          fontSize: 200,
          color: Colors.white,
          decoration: TextDecoration.none,
          fontStyle: FontStyle.italic,
        ),
      ),
      Spacer(),
      Column(
        mainAxisAlignment: MainAxisAlignment.end,
        children: [Text('hello')],
      )
    ],
  ),
);

这种方式怎么样？添加两个垫片

颤振如何将项目移至底部

3 个答案: