在颤动中设置列宽答案

【问题标题】：Set column width in flutter在颤动中设置列宽
【发布时间】：2019-03-17 22:52:14
【问题描述】：

我需要在flutter中设置一个列宽，我必须做一个有3个部分的布局，一个应该是屏幕的20%，另一个是60%，最后一个是20%。我知道这 3 列应该排成一行，但我不知道设置大小的方法，当我这样做时，这 3 列的大小相同。

如有任何反馈，我将不胜感激。

【问题讨论】：

【解决方案1】：

我建议不要硬编码大小，而是使用Flex like

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

这将产生如下所示，

【讨论】：

【解决方案2】：

限制Column 的width 可能是

限制Column本身的width，使用SizedBox

SizedBox(
  width: 100, // set this
  child: Column(...),
)

2 (A)。将width 的children 限制在Column 内，没有硬编码值

Row(
  children: <Widget>[
    Expanded(
      flex: 3, // takes 30% of available width 
      child: Child1(),
    ),
    Expanded(
      flex: 7, // takes 70% of available width  
      child: Child2(),
    ),
  ],
)

2 (B)。将width 的children 限制在Column 内，使用硬编码值。

Row(
  children: <Widget>[
    SizedBox(
      width: 100, // hard coding child width
      child: Child1(),
    ),
    SizedBox(
      width: 200, // hard coding child width
      child: Child2(),
    ),
  ],
)

【讨论】：

【解决方案3】：

这不是对原始问题的回答，而是展示了一个类似的用例。我有一个容器，我想扩大宽度直到某个值。如果宽度变大，我希望容器始终位于中间。这在呈现表单时非常有用，尤其是在 Web 和桌面应用程序上。

import 'package:flutter/material.dart';
import 'dart:math' as math;

var index = 0;

Widget buildContainer() { // Just a placeholder with random colour
  index++;
  return Container(
    height: 60,
    margin: const EdgeInsets.only(right: 5),
    color: Colors.primaries[math.Random().nextInt(Colors.primaries.length)],
    child: Text("$index"),
  );
}

Widget containers() {
  return Row(
    children: [
      Expanded(child: buildContainer(),
      flex: 2), // <- Control the width of each item. See other answers. 
      Expanded(child: buildContainer(), flex: 3,)
    ],
  );
}
class FormLayout extends StatelessWidget {
  const FormLayout({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Center(     //<- Centre the form
      child: SizedBox(
        width: 400,    //<- Limit the width
        child: Column(
            crossAxisAlignment: CrossAxisAlignment.stretch,
            children: [containers()]),
      ),
    );
  }
}

【讨论】：