Flutter基礎—佈局模型之水平垂直
阿新 • • 發佈:2019-02-11
水平佈局
Row控制元件即水平佈局控制元件,能夠將子控制元件水平排列。
Row子控制元件有靈活與不靈活的兩種,Row首先列出不靈活的子控制元件,減去它們的總寬度,計算還有多少可用的空間。然後Row按照Flexible.flex屬性確定的比例在可用空間中列出靈活的子控制元件。要控制靈活子控制元件,需要使用Flexible控制元件:
import 'package:flutter/material.dart';
class LayoutDemo extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(
title: new Text('水平方向佈局'),
),
body: new Row(
children: <Widget>[
new RaisedButton(
onPressed: () {
print('點選紅色按鈕事件');
},
color: const Color(0xffcc0000),
child: new Text('紅色按鈕'),
),
new Flexible(
flex: 1,
child: new RaisedButton(
onPressed: () {
print('點選黃色按鈕事件');
},
color: const Color(0xfff1c232),
child: new Text('黃色按鈕'),
),
),
new RaisedButton(
onPressed: () {
print('點選粉色按鈕事件');
},
color: const Color(0xffea9999),
child: new Text('粉色按鈕'),
),
]
),
);
}
}
void main() {
runApp(
new MaterialApp(
title: 'Flutter教程',
home: new LayoutDemo(),
),
);
}
垂直佈局
Column控制元件即垂直佈局控制元件,能夠將子控制元件垂直排列。
與Row控制元件一樣,Column控制元件的子控制元件也有分靈活與不靈活的。首先Column列出不靈活的子控制元件,減去它們的總高度,計算還有多少可用空間。然後Column按照Flexible.flex屬性確定的比例在可用空間中列出靈活的子控制元件。要控制靈活子控制元件,需要使用Flexible控制元件:
import 'package:flutter/material.dart';
class LayoutDemo extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(
title: new Text('垂直方向佈局'),
),
body: new Column(
children: <Widget>[
new RaisedButton(
onPressed: () {
print('點選紅色按鈕事件');
},
color: const Color(0xffcc0000),
child: new Text('紅色按鈕'),
),
new Flexible(
flex: 1,
child: new RaisedButton(
onPressed: () {
print('點選黃色按鈕事件');
},
color: const Color(0xfff1c232),
child: new Text('黃色按鈕'),
),
),
new RaisedButton(
onPressed: () {
print('點選粉色按鈕事件');
},
color: const Color(0xffea9999),
child: new Text('粉色按鈕'),
),
]
),
);
}
}
void main() {
runApp(
new MaterialApp(
title: 'Flutter教程',
home: new LayoutDemo(),
),
);
}