小部件占据屏幕 1/3 的好方法是什么？

Question

我试图让一个小部件占据屏幕的 1/3，无论手机方向如何。我该如何实现这个目标？

Answer 1

我通过使用 Column 并将内容包装在 Flex 中并更改 Flex 以使子项占据屏幕的 1/3 得到了我想要的：

new Column(
  mainAxisAlignment: MainAxisAlignment.spaceBetween,
  children: <Widget>[
    new Flexible(flex: 2, child: new SizedBox()),
    new Flexible(flex: 1, child: createTextBox())
  ]
);

Answer 2

要使 Flutter 中的 widget 占据屏幕的 1/3，可以使用

FractionallySizedBox

widget。该小部件将其子部件的大小调整为总可用空间的一小部分。以下是如何实现此目标的示例：

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('FractionallySizedBox Example'),
        ),
        body: Center(
          child: FractionallySizedBox(
            widthFactor: 1 / 3, // This makes the widget take 1/3 of the screen width
            child: Container(
              color: Colors.blue,
              height: 200, // You can set a fixed height or use heightFactor similarly
              child: Center(
                child: Text(
                  '1/3 of the screen width',
                  style: TextStyle(color: Colors.white),
                ),
              ),
            ),
          ),
        ),
      ),
    );
  }
}

在此示例中：

• FractionallySizedBox

  小部件与

  widthFactor

  的

  1 / 3

  一起使用，这使得它的子小部件占据屏幕宽度的三分之一。

• Container

  内的

  FractionallySizedBox

  采用蓝色背景和一些文本来可视化其占据的空间。

如果您希望小部件也占据屏幕高度的一小部分，您可以类似地调整

heightFactor

。这种方法很灵活，非常适合响应式设计。

Answer 3

有一些小部件可能会有所帮助：特别是 AspectRatio、Column/Expanded 和 CustomSingleChildLayout。如果不确切知道你想做什么，很难给出一个好的答案。

Answer 4

您应该尝试使用 Expanded 小部件作为行的子项，如下所示：

new Row(
  mainAxisAlignment: MainAxisAlignment.spaceBetween,
  children: [
    new Expanded(
      child: yourFirstContentWidget,
               ),
    new Expanded(
      child: yourNextContentWidget,
               ),
    new Expanded(
      child: yourLastContentWidget,
               )
            ]
        )

扩展的小部件将尝试填充尽可能多的行空间。由于它们是三个，因此它们必须共享空间，最终每个占据行的 1/3。