如何在Flutter中制作适合所有屏幕的列

时间:2019-04-17 22:18:33

标签: user-interface dart flutter flutter-layout

ui

我开始颤抖,但是我无法弄清楚如何将2个列的小部件除以使其适合所有屏幕,如图所示。

1 个答案:

答案 0 :(得分:2)

你去了

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        Expanded(child: Container(color: Colors.blue)),
        Expanded(child: Container(color: Colors.lightBlueAccent))
      ],
    );
  }
}

如何完成:

  1. 我正在通过runApp方法运行应用程序
  2. 我创建一列,并在其中放置基本上带有颜色的容器
  3. 但是容器没有任何大小,因此它们是不可见的
  4. 使用扩展的小部件,我让小部件知道尽可能大。
  5. 因为我有两个展开的小部件,所以它们的大小相同。

Voila
Screenshot from emulator device