Flutter学习之Container,Row,Column布局

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_app/demo/clickText.dart';

void main() => {runApp(new DemoApp())};

class DemoApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: '哈哈哈',
      home: new DemoAppPage(),
    );
  }
}

class DemoAppPage extends StatefulWidget {
  @override
  State createState() {
    return new DemoAppState();
  }
}

class DemoAppState extends State {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return new Scaffold(
      appBar: AppBar(
        centerTitle: true,
        leading: Icon(Icons.add),
        title: Text('哈哈'),
      ),
      body: new ListView(
        children: [
          new Container(
            //这个容器,是为了设置离上,下左右的边距
            color: Colors.red,
            padding: new EdgeInsets.fromLTRB(20, 20, 0, 20),
            child: new Row(
              crossAxisAlignment: CrossAxisAlignment.start,
              mainAxisAlignment: MainAxisAlignment.spaceAround,
              children: [
                new Column(
                  children: [
                    new Icon(Icons.access_alarm),
                    new Text('报班课'),
                  ],
                ),
                new Column(
                  children: [
                    new Icon(Icons.call),
                    new Text('免费课'),
                  ],
                ),
                new Column(
                  children: [
                    new Icon(Icons.title),
                    new Text('题库'),
                  ],
                ),
                new Column(
                  children: [
                    new Icon(Icons.message),
                    new Text('答疑'),
                  ],
                ),
              ],
            ),
          ),
          new Container(
            color: Colors.blue,
//            padding: new EdgeInsets.fromLTRB(20, 20, 0, 20),
            child: new Row(
              mainAxisAlignment: MainAxisAlignment.spaceAround,
              children: [new Text('哈哈哈哈哈')],
            ),
          ),
        ],
      ),
    );
  }
}

你可能感兴趣的:(Flutter学习之Container,Row,Column布局)