我需要在flutter中设置一个列宽,我需要做一个有3个部分的布局,一个应该占屏幕的20%,另一个占60%,最后一个占20%。我知道这3列应该排成一行,但是我不知道如何设置大小,当我这样做的时候,3列的大小是一样的。如有任何反馈,我将不胜感激。
ogq8wdun1#
我建议使用Flex,而不是硬编码大小,如
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), ) ], )
它会产生如下所示,
o3imoua42#
限制Column的width可以是1.限制Column本身的width,使用SizedBox
Column
width
SizedBox
SizedBox( width: 100, // set this child: Column(...), )
2(A).将children的width限制在Column内,没有硬编码值
children
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).利用硬编码值**将children的width限制在Column**内。
Row( children: <Widget>[ SizedBox( width: 100, // hard coding child width child: Child1(), ), SizedBox( width: 200, // hard coding child width child: Child2(), ), ], )
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()]), ), ); } }
vxqlmq5t4#
用一行 Package 即可
Row( // this row has full width children: [ Column( children: [...] ) ])
4条答案
按热度按时间ogq8wdun1#
我建议使用
Flex
,而不是硬编码大小,如它会产生如下所示,
o3imoua42#
限制
Column
的width
可以是1.限制
Column
本身的width
,使用SizedBox
2(A).将
children
的width
限制在Column
内,没有硬编码值2(B).利用硬编码值**将
children
的width
限制在Column
**内。lsmepo6l3#
这不是对原始问题的回答,而是演示了一个类似的用例。我有一个容器,我想扩大宽度直到某个值。如果宽度变大,我想容器总是在中间。这在呈现表单时很有用,尤其是在Web和桌面应用程序上。
vxqlmq5t4#
用一行 Package 即可