flutter学习（5）

1.Flutter Expanded 类似 Web 中的 Flex 布局

import 'package:flutter/material.dart';
import 'res/data.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('flutter APP'),
        ),
        body: HomeContent(),
      ),
    );
  }
}

class HomeContent extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return 
    Row(
      children: <Widget>[
        IconContainer(
          Icons.search,
          color: Colors.blue,
         ),
        // Expanded(
        //   flex: 1,
        //   child:IconContainer(
        //   Icons.search,
        //   color: Colors.blue,
        //   ),
        // ),
        Expanded(
          flex: 2,
          child:IconContainer(
          Icons.search,
          color: Colors.pink,
          ),
        ),
      ],
    );
  }
}

// 定义一个动态生成图标的组件，参数由外层传入
class IconContainer extends StatelessWidget {
  // 定义一个构造函数可以进行参数的传入与赋值
  double size = 32.0; //设置默认值
  IconData icon; //必传项
  Color color = Colors.white; //设置默认值

  IconContainer(this.icon, {this.size, this.color}); //{}里的是选填项

  @override
  Widget build(BuildContext context) {
    return Container(
      width: 100.0,
      height: 100.0,
      color: this.color,
      child: Center(
        child: Icon(
          this.icon,
          size: this.size,
          color: Colors.white,
        ),
      ),
    );
  }
}

2.布局练习

import 'package:flutter/material.dart';
import 'package:flutterapp/main-1.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('flutter APP'),
        ),
        body: HomeContent(),
      ),
    );
  }
}

class HomeContent extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Column(children: <Widget>[
      Row(children: <Widget>[
        Expanded(
          child: Container(
            width: 200.0,
            height: 200.0,
            color: Colors.black,
            child: Text('11111111111'),
          ),
        )
      ]),
      SizedBox(
        height: 10,
      ),
      Row(
        children: <Widget>[
          Expanded(
              flex: 2,
              child: Container(
                height: 180,
                child: Image.network(
                  'https://wx.qlogo.cn/mmopen/vi_32/Q0j4TwGTfTLtiazJZeGWSbWDpsqHVibNTx8p2rmVpDWHVeiacHsLIEib8O3FbDicichaZ0aIdTd8wZoWSlPmLf9Ks7Sg/132',
                  fit: BoxFit.cover,
                ),
              )),
          SizedBox(
            width: 10,
          ),
          Expanded(
              flex: 1,
              child: Container(
                  height: 180.0,
                  child: ListView(
                    children: <Widget>[
                      Container(
                        height: 85.0,
                        child: Image.network(
                          'https://wx.qlogo.cn/mmopen/vi_32/Q0j4TwGTfTLtiazJZeGWSbWDpsqHVibNTx8p2rmVpDWHVeiacHsLIEib8O3FbDicichaZ0aIdTd8wZoWSlPmLf9Ks7Sg/132',
                          fit: BoxFit.cover,
                        ),
                      ),
                      SizedBox(
                        height: 10,
                      ),
                      Container(
                        height: 85.0,
                        child: Image.network(
                          'https://wx.qlogo.cn/mmopen/vi_32/Q0j4TwGTfTLtiazJZeGWSbWDpsqHVibNTx8p2rmVpDWHVeiacHsLIEib8O3FbDicichaZ0aIdTd8wZoWSlPmLf9Ks7Sg/132',
                          fit: BoxFit.cover,
                        ),
                      )
                    ],
                  )))
        ],
      )
    ]);
  }
}