代码之家 › 专栏 › 技术社区 › Unbreakable

flex在颤振中的应用

flutter-web flutter-layout flutter

0

Unbreakable · 技术社区 · 5 年前

我是一个初学者在颤振,我已经学会了如何处理大小和文本呈现时,屏幕大小变化从桌面到平板电脑到移动。但我想了解,当我在同一屏幕模式下减小屏幕大小时,如何更改大小或调整内容。

return Container(
  child: new Row(
    children: <Widget>[
      new Column(
        children: <Widget>[new Text("Hello World")],
      ),
      new Column(
        children: <Widget>[
          new Text(
              "This is a long text this is a long test this is This is a long text this is a long test this is This is a long text this is a long test this is This is a long text this is a long test this is This is a long text this is a long test this is This is a long text this is a long test this is ")
        ],
      )
    ],
  ),
);

2 回复 | 直到 4 年前

1

10

Paresh Mangukiya 4 年前

通过使用 Expanded 设置 flex 属性,我们可以在 Row 或 Column 它自己的重量。这意味着允许该小部件填充多少可用空间。因此,我们可以使用以下代码进行水平对齐:

默认情况下, 扩大 弯曲 全部财产。

下面是一个简单的代码示例:

@override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Expanded"),
      ),
      body: Container(
        child: Row(
          children: <Widget>[
            Expanded(
              flex: 6, // 60% of space => (6/(6 + 4))
              child: Container(
                color: Colors.red,
              ),
            ),
            Expanded(
              flex: 4, // 40% of space
              child: Container(
                color: Colors.purple,
              ),
            ),
          ],
        ),
      ),
    );
  }

2

7

leoelstin 5 年前

Expanded类似于Flex,支持添加Flex,

你可以把你的孩子用展开的纸包起来,然后按下面的方式弯曲

更新代码:

Container(
  child: new Row(
    children: <Widget>[
      new Expanded ( 
        flex:1,
        child : Column(
        children: <Widget>[new Text("Hello World")],
      ),),
      new Expanded( 
        flex :2,
        child: Column(
        children: <Widget>[
          new Text(
              "This is a long text this is a long test this is This is a long text this is a long test this is This is a long text this is a long test this is This is a long text this is a long test this is This is a long text this is a long test this is This is a long text this is a long test this is ")
        ],
      ),)
    ],
  ),
)

展开的:一个小部件,它展开行、列或Flex的子对象,使子对象填满可用空间。

你可以在官方文件上阅读更多 here

3

6

Isti01 5 年前

控件中的小部件 Flex 小工具(例如。 Column, Row )可以包装在灵活的小部件中。这个 Flexible widget具有flex属性。颤振有3个灵活的小部件: Flexible , Expanded 和 Spacer

return Container(
child: new Row(
  children: <Widget>[
    Flexible(
      flex: 1 /*or any integer value above 0 (optional)*/,
      child: Column(
        children: <Widget>[
          Expanded(
              flex: 1 /*or any integer value above 0 (optional)*/,
              child: new Text("Hello World")),
        ],
      ),
    ),
    new Column(
      children: <Widget>[
        new Text(
            "This is a long text this is a long test this is This is a long text this is a long test this is This is a long text this is a long test this is This is a long text this is a long test this is This is a long text this is a long test this is This is a long text this is a long test this is ")
      ],
    )
  ],
),

);

4

0

Md omer arafat 4 年前

#FlexFit.紧的或膨胀的: 这个孩子最多可以和可用空间一样大。