Flutter的菜鸟教程五:Container

本文将使用container来实现一个网格效果,这可以使我们更熟悉widget组合使用,当然这类效果我们应该使用GridView来实现,这在后续的文章中将会学习
本文中将没有新的内容,我们可以使用前面学习的内容来组合本篇文章的效果,看到效果图你有思路吗？注意他是可以垂直滚动的

---

// Copyright 2017 The Chromium Authors. All rights reserved.
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.
/**
 * container
 */
import 'package:flutter/material.dart';

import 'package:flutter/rendering.dart' show debugPaintSizeEnabled;

void main() {
//  debugPaintSizeEnabled = true;
  runApp(new MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: "container",
      home: new Scaffold(
        appBar: new AppBar(
          title: new Text("Container"),
        ),
        body: new MyContainer(),
      ),
    );
  }
}

class MyContainer extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return new MyContainerState();
  }
}

class MyContainerState extends State<MyContainer> {
  @override
  Widget build(BuildContext context) {
    //单个item
    var img = new Expanded(
      child: new Container(
        decoration: new BoxDecoration(
            border: new Border.all(color: Colors.black38, width: 10.0),
            borderRadius: const BorderRadius.all(const Radius.circular(8.0))),
        margin: const EdgeInsets.all(4.0),
        child: new Image.asset("images/lake.jpg"),
      ),
    );
//    水平布局
    var row = new Row(
      children: [
        img,
        img,
      ],
    );

    return new Container(
      decoration: new BoxDecoration(
        color: Colors.black26,
      ),
      //使用ListView这样我们就可以滑动超出屏幕的内容
      child: new ListView(
        children: [
          row,
          row,
          row,
          row,
        ],
      ),
    );
  }
}