DengQN·一个普通程序员;
flutter里的row和col
2018-09-30 17:00 57
#放#起来#差不多#直接#就行了#里边#都行#有个

flutter 的col 和 row 用起来和 bootstrap 差不多

直接一个new Row(childen:..);就行了, 里边放什么都行。。。

有个要注意的是,假如放了太多东西进去,而不用listview包着的话,会因为溢出屏幕而报错。

demo code

import 'package:flutter/material.dart';

class AppBar extends StatelessWidget{
  @override
    Widget build(BuildContext context) {
      // TODO: implement build
      return new Container(
        // margin: const EdgeInsets.fromLTRB(0.0, 24.0, 0.0, 0.0),
        color: Colors.purple.shade300,
        child: new Row(
          children: <Widget>[
            new IconButton(
              icon: new Icon(Icons.menu),
              tooltip: 'menu',
              onPressed: null,
            ),
            new Expanded(
              child: new Text('Title'),
            ),
            new IconButton(
              icon: new Icon(Icons.search),
              tooltip: 'search',
              onPressed: null,
            )
          ],
        ),
      );
    }
}

class PageContent extends StatelessWidget{
  const PageContent({this.color});
  final Color color;
    @override
      Widget build(BuildContext context) {
        // 
        return new Material(
          child: new Column(
            children: <Widget>[
              new Row(
                children: <Widget>[
                  new Expanded(
                    child: new Container(
                      height: 50.0,
                      color: Colors.orange,
                      child: new Text('test'),
                    )
                  ),
                  new Expanded(
                    child: new Container(
                      height: 50.0,
                      color: Colors.blue,
                      child: new Text('test'),
                    )
                  ),
                  new Expanded(
                    child: new Container(
                      height: 50.0,
                      color: Colors.teal,
                      child: new Text('test'),
                    )
                  ),
                ],
              ),
              new Image.network('https://i0.hdslb.com/bfs/archive/36f639d8cedc57840aff48361a7a1e8389040077.jpg'),
                new Image.network('https://i0.hdslb.com/bfs/archive/36f639d8cedc57840aff48361a7a1e8389040077.jpg'),
                new Container(
                  margin: const EdgeInsets.fromLTRB(0.0, 10.0, 0.0, 0.0),
                  child: new Text('VioletEverGarden',
                    style: new TextStyle(
                      color: color,
                      fontSize: 36.0
                  )
                ),
              )
            ],
          )
        );
      }
}


class HomePage extends StatelessWidget{
  const HomePage({this.color});
  final Color color;
  @override
    Widget build(BuildContext context) {
      // TODO: implement build
      return new Material(
        child: new Column(
          children: <Widget>[
            new Container(
              color: this.color,
              height: 24.0,
            ),
            new AppBar(),
            new PageContent(color: color,)
          ],
        ),
      );
    }
}
void main()=>runApp(new MaterialApp(
  title: 'title',
  home: new HomePage(color:const Color.fromRGBO(138,43,226, 1.0)),
));