码迷,mamicode.com
首页 > 其他好文 > 详细

Flutter——Expanded组件("可伸缩"组件)

时间:2019-12-05 19:02:00      阅读:159      评论:0      收藏:0      [点我收藏+]

标签:ret   extends   nap   orange   img   xtend   ESS   range   column   

Expanded组件可以结合Row和Column布局组件使用。

  • Expanded组件的常用属性

属性 说明
flex 元素占整个父Row/Column的比例
child 子元素

技术图片

 

 

import ‘package:flutter/material.dart‘;

void main() {
  runApp(MaterialApp(
    title: "ExpandedWidget",
    home: MyApp(),
  ));
}


class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Row(
          mainAxisAlignment: MainAxisAlignment.start,
          children: <Widget>[
            Container(
              color: Colors.orange,
              width: 80,
              height: 80,
            ),
            Expanded(
              flex: 1,
              child: Container(
                color: Colors.redAccent,
                width: 80,
                height: 80,
              ),
            ),
            Expanded(
              flex: 2,
              child: Container(
                color: Colors.teal,
                width: 80,
                height: 80,
              ),
            )
          ],
        ),
    );
  }
}

 

Flutter——Expanded组件("可伸缩"组件)

标签:ret   extends   nap   orange   img   xtend   ESS   range   column   

原文地址:https://www.cnblogs.com/chichung/p/11990774.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!