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

Posted

技术标签:

【中文标题】如何在 Flutter 中制作适合所有屏幕的列【英文标题】:How to make a column that fit all the screen in Flutter 【发布时间】:2019-09-08 05:46:59 【问题描述】:

我开始颤抖,但我不知道如何将列小部件除以 2 并使其适合所有屏幕,如图所示。

【问题讨论】:

【参考方案1】:

你来了

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

它是如何完成的:

    我正在通过 runApp 方法运行应用程序 我创建了一个列并放置了包含颜色的容器 但是容器没有任何尺寸,所以它们是不可见的 通过扩展小部件,我让小部件知道要尽可能大。 由于我有两个展开的小部件,它们的大小相同。

瞧Screenshot from emulator device

【讨论】:

以上是关于如何在 Flutter 中制作适合所有屏幕的列的主要内容,如果未能解决你的问题,请参考以下文章

如何使图像适合 Flutter 中的列宽?

如何在 Flutter 中创建具有固定列的水平滚动表格?

如何在 Flutter 中拉伸图像以适合整个背景(100% 高度 x 100% 宽度)?

如何在 Flutter 中根据屏幕大小对长文本进行分页

如何让我的按钮适合 Android 的屏幕?

如何在 Flutter 的底部导航中处理后退导航