Question

我正在为Flutter应用程序做布局

我想做的是

 -----------------------
|[i]      [text]        |
|                       |

图标应位于左侧（填充5像素）文字应位于屏幕的中心。

首先，我应该使用Column

但是我的布局比例不一样

这可能很简单，我该怎么做？

Answer 1

Stack()是可以使用的许多选项之一。像这样：

Stack(
  children:<Widget>[
    Padding(
       padding: EdgeInsets.only(left: 5),
       child: Icon(Icons.info),
    ),
    Align(
      alignment: Alignment.topCenter,
      child: Text("I'm on the top and centered."),
    ),
  ],
),

Answer 2

一种做到这一点的方法就是这样。

Widget build(BuildContext context) {
    return Column(
      children: [
        Padding(
          padding: EdgeInsets.all(5),
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              Icon(Icons.info),
              Text('text'),
              Opacity(opacity: 0, child: Icon(Icons.info)),
            ],
          ),
        ),
        Padding(
          padding: EdgeInsets.all(5),
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              Icon(Icons.info),
              Text('second text'),
              Opacity(opacity: 0, child: Icon(Icons.info)),
            ],
          ),
        ),
      ],
    );
}

结果：

Answer 3

我可能会迟到，但是我希望这个答案能够出现，如果有人将来会发现它对于开发目的更好。

我们可以制作一个可重用的小部件，我们可以在主小部件中使用它。该小部件将接受text和icon在被调用时传递

  // IconData is the data type for the icons
  Widget myWidget(String text, IconData icon) => Row(
    mainAxisSize: MainAxisSize.min,
    mainAxisAlignment: MainAxisAlignment.start,
    children: [
      // this will be used a left-padding param
      SizedBox(width: 20.0),
      // using it here
      Icon(icon, size: 28.0, color: Colors.greenAccent),
      SizedBox(width: 5.0),
      // this will take the remaining space, and then center the child
      Expanded(child: Center(child: Text(text)))
    ]
  );

要在主窗口小部件中使用，只需执行以下操作：

        Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            // calling our widget here
            myWidget('FirstText', Icons.alarm),
            SizedBox(height: 20.0), // this is used as a top margin
            myWidget('SecondText', Icons.notifications)
          ]
        )

如果您想查看我使用的资源，请参阅：

您将获得的结果是：

Answer 4

这是我不久前针对同一问题给出的答案，但是另一种情况是垂直（列）而不是水平（行）。在此示例中，只需将“行和列”换成“列和行”，您就会明白。

我的代码添加了灰色，以显示两种方法之间的区别。

堆栈可以工作，但是这太过分了，这种问题是为什么我们要扩展和灵活的一部分。诀窍是使用三个弹性元件（2个扩展元件和一个垫片）。将垫片放在顶部。它和底部的Expanded必须具有相同的flex值，以使中间的Expanded居中。

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,
                      ),
                    ),
                  ),
                ),
              ),
            ],
          ),
        ],
      ),
    );
  }
}

我应该使用什么小部件来显示中心文本和左侧按钮

4 个答案: