我需要在Flatter中设置一个列宽,我必须做一个包含3个部分的布局,一个应该是屏幕的20%,另一个60%,最后一个20%.

如果有任何反馈,我将不胜感激.

推荐答案

与其硬编码尺寸,我建议使用Flex

Row(
      children: <Widget>[
        Expanded(
          flex: 2, // 20%
          child: Container(color: Colors.red),
        ),
        Expanded(
          flex: 6, // 60%
          child: Container(color: Colors.green),
        ),
        Expanded(
          flex: 2, // 20%
          child: Container(color: Colors.blue),
        )
      ],
    )

它将产生如下所示的结果,

enter image description here

Flutter相关问答推荐

ListTile未正确显示在flutter中

Box约束强制无限高:SizedBox. Expand()

我如何才能动态地将小部件排成一排进行排列呢?

如何在Ffltter Chrome应用程序中使用webview_fltter_web显示自定义html而不是外部uri?

升级到Ffltter 3.16后,应用程序栏、背景 colored颜色 、按钮大小和间距都会发生变化

框中的Flutter 适配图像

任务';:app:check DebugDuplicateClasss';的Ffltter Share_plus抛出执行失败

应为标识符,并应为查找)错误

为什么用户界面不会在Flight中的复选框中更改?

从图标启动器打开时,VSCode未检测到Web设备

如何在flutter中将所有单词的第一个字母大写

带按钮的 Riverpod future Provider

Flutter Dismissible 不会在 startToEnd 滑动时被关闭

Flutter 包错误:此应用程序使用的是已弃用的 Android 嵌入版本

用户文档 ID 与 Firestore 中的用户 ID 相同

Flutter 错误:OutletListModel类型的值不能分配给List类型的变量?

在 Dart 中使用隔离时访问外部范围内的变量

如何在Flutter 中根据其父小部件高度设置图标按钮飞溅半径

如何在flutter中共享容器和gridview之间的滚动条?

如何验证位于 PageView 内不同页面的 TextFormFields