设置Flutter时的列宽

lokaqttq  于 2022-12-24  发布在  Flutter
关注(0)|答案(4)|浏览(144)

我需要在flutter中设置一个列宽,我需要做一个有3个部分的布局,一个应该占屏幕的20%,另一个占60%,最后一个占20%。我知道这3列应该排成一行,但是我不知道如何设置大小,当我这样做的时候,3列的大小是一样的。
如有任何反馈,我将不胜感激。

ogq8wdun

ogq8wdun1#

我建议使用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),
        )
      ],
    )

它会产生如下所示,

o3imoua4

o3imoua42#

限制Columnwidth可以是
1.限制Column本身的width,使用SizedBox

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

2(A).将childrenwidth限制在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).利用硬编码值**将childrenwidth限制在Column**内。

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

lsmepo6l3#

这不是对原始问题的回答,而是演示了一个类似的用例。我有一个容器,我想扩大宽度直到某个值。如果宽度变大,我想容器总是在中间。这在呈现表单时很有用,尤其是在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()]),
      ),
    );
  }
}
vxqlmq5t

vxqlmq5t4#

用一行 Package 即可

Row( // this row has full width
  children: [
    Column(
      children: [...]
    )
  ])

相关问题