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<StatefulWidget> createState() {
    return new DemoAppState();
  }
}

class DemoAppState extends State<DemoAppPage> {
  @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: <Widget>[
                new Column(
                  children: <Widget>[
                    new Icon(Icons.access_alarm),
                    new Text(报班课),
                  ],
                ),
                new Column(
                  children: <Widget>[
                    new Icon(Icons.call),
                    new Text(免费课),
                  ],
                ),
                new Column(
                  children: <Widget>[
                    new Icon(Icons.title),
                    new Text(题库),
                  ],
                ),
                new Column(
                  children: <Widget>[
                    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: <Widget>[new Text(哈哈哈哈哈)],
            ),
          ),
        ],
      ),
    );
  }
}
经验分享 程序员 微信小程序 职场和发展