设置颤振柱宽

我需要在颤动设置一个列宽度，我必须做一个布局与3个部分，一个应该是20% 的屏幕，其他60% 和最后一个20% 。 我知道这3列应该排成一行，但我不知道如何设置大小，当我这样做时，这3列的大小是相同的。

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

163433 次浏览
小开
最佳答案

Instead of hard-coding the size, I would suggest using 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),
)
],
)

Which will produce like below,

enter image description here

小开

Limiting the width of a Column could be

  1. Limiting the width of Column itself, use SizedBox

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

2 (A). Limiting width of children inside Column, without hardcoding values

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). Limiting width of children inside Column, with hardcoding values.

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

This is not an answer to the original question but demonstrating a similar use case. I have a container and I want to expand the width until certain value. If width gets bigger I want container to be always in the middle. This is useful when rendering forms especially on web and desktop applications.

enter image description here

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

提交答案