Flutter入门学习--(12)行控件Row

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/zx13525079024/article/details/86632217

  Row控件是Flutter中的行布局控件，在一行中可以放置的内容，下面的例子，展示了将一行四等分，中间的一个控件占用2行的效果

  代码如下

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        title: 'Flutter',
        home: new Row(
          children: <Widget>[
            Expanded(
              child:  Image.network("https://img11.360buyimg.com/babel/s190x210_jfs/t1/28751/20/4855/40009/5c36b55dE3aaad926/d418a72a4338e90f.png!q90!cc_190x210"),
              flex: 1,
            ),
            Expanded(
              child: Image.network("https://img11.360buyimg.com/babel/s190x210_jfs/t1/28751/20/4855/40009/5c36b55dE3aaad926/d418a72a4338e90f.png!q90!cc_190x210"),
              flex: 2,
            ),
            Expanded(
              child:  Image.network("https://img11.360buyimg.com/babel/s190x210_jfs/t1/28751/20/4855/40009/5c36b55dE3aaad926/d418a72a4338e90f.png!q90!cc_190x210"),
              flex: 1,
            ),
          ],
        ));
  }
}

Expanded 组件的作用是会把剩余控件填满，

flex表示占用比例