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('標題'),
),
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('測試'),
)
),
new Expanded(
child: new Container(
height: 50.0,
color: Colors.blue,
child: new Text('測試'),
)
),
new Expanded(
child: new Container(
height: 50.0,
color: Colors.teal,
child: new Text('測試'),
)
),
],
),
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)),
));