将子窗口小部件定位在“列”父窗口小部件的中心和末尾

Question

我必须在Column父窗口小部件中放置2个子窗口小部件。我希望其中一个位于列的中心，另一个位于列的末尾。最好的方法是什么？

import 'package:flutter/material.dart';

class Screen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Screen'),
      ),
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center, // this is wrong, it positions both the widgets in the center
        children: <Widget>[
          Text('This text should be at the center of the column'),
          Text('This text should be at the end of the column'),
        ],
      ),
    );
  }
}

Answer 1

您可以像这样使用Spacer小部件：

Column(
        mainAxisAlignment: MainAxisAlignment.center, 
        children: <Widget>[
          Spacer(),
          Text('This text should be at the center of the column'),
          Spacer(),
          Text('This text should be at the end of the column'),
        ],
      ),
    );

Answer 2

（编辑：我更改了代码，并向我的代码添加了灰色，以便进行比较，因此您可以看到我说的是将其偏移一半的意思。您必须增加字体大小才能看到区别）

这并不像其他答案那么容易，因为必须将第一个文本居中，并且如果您仅在列中使用两个元素，那么无论您做什么，都会使顶部项偏离中心一半底部文本的高度（如仅使用两个扩展名），否则设计将是刚性的，因此可能无法在不同大小的设备上正确显示。

因此，诀窍是使用三个Flexible（两个Expanded和一个Spacer）。将垫片放在顶部。它和底部的Expanded必须具有相同的flex值，以使中间的Expanded居中。

然后只有使用“ alignment：Alignment.center”才能为顶部文本提供所需的结果。

import 'package:flutter/material.dart';

class CenteringOneItemWithAnotherItemInTheColumn extends StatelessWidget {
  const CenteringOneItemWithAnotherItemInTheColumn({
    Key key,
  }) : super(
    key: key,
  );

  /// Adjust these values as needed
  final int sameFlexValueTopAndBottom = 40; // 40%
  final int middleFlexValue = 20; // 20%

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Column Alignment Question'),
      ),
      body: Row(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        children: [
          Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              const Spacer(),
              const Text(
                'Cent',
                style: TextStyle(
                  fontSize: 64,
                ),
              ),
              const Spacer(),
              const Text(
                'Bot',
                style: TextStyle(
                  fontSize: 64,
                ),
              ),
            ],
          ),
          Column(
            children: <Widget>[
              /// The key is to have the Spacer and the bottom Expanded
              /// use the same value for flex. That will cause the middle
              /// child of the Column to be centered vertically.
              Expanded(
                flex: sameFlexValueTopAndBottom,
                child: Container(
                  width: 100,
                  color: Colors.grey[300],
                ),
              ),
              Expanded(
                flex: middleFlexValue,
                child: const Align(
                  alignment: Alignment.center,
                  child: Text(
                    'Cent',
                    style: TextStyle(
                      fontSize: 64,
                    ),
                  ),
                ),
              ),
              Expanded(
                flex: sameFlexValueTopAndBottom,
                child: Container(
                  color: Colors.grey[300],
                  child: const Align(
                    alignment: Alignment.bottomCenter,
                    child: Text(
                      'Bot',
                      style: TextStyle(
                        fontSize: 64,
                      ),
                    ),
                  ),
                ),
              ),
            ],
          ),
        ],
      ),
    );
  }
}

Answer 3

另一种方法是在开始时使用一个空的SizedBox，然后使用mainAxisAlignment: MainAxisAlignment.spaceBetween,

class Screen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Screen'),
      ),
      body: Column(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: <Widget>[
          SizedBox(
            height: 0.0,
            width: 0.0,
          ),
          Text('This text should be at the center of the column'),
          Text('This text should be at the end of the column'),
        ],
      ),
    );
  }
}

Answer 4

一种方法是根据需要使用扩展小部件和对齐方式

 Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Screen'),
      ),
      body: Column(
        // mainAxisAlignment: MainAxisAlignment.center, // this is wrong, it positions both the widgets in the center
        children: <Widget>[

          Expanded(child: Container(alignment:Alignment.bottomLeft,child: Text('This text should be at the center of the column'))),
          Expanded(child: Container(alignment: Alignment.bottomLeft, child: Text('This text should be at the end of the column'))),
        ],
      ),
    );


  }