如何在 Flutter 中将两个容器拆分为 60% / 40% 并将文本放置在容器底部?
How to split two containers in 60% / 40% and position text at the bottom of a container in Flutter?
我正在尝试创建类似于下图的内容,其中有两个容器,一个占屏幕的 40%,另一个占屏幕的其余部分。
在顶部容器中,我希望在顶部有一个文本,在底部有一个文本,左对齐。
我有这个:
// main page body
body: Container(
child: Column(
children: [
// top container
new Expanded(
child: null, // todo, add the two texts,
),
// bottom container
new Container(
height: 400.0, // this needs to be 60% of the page
child: new Text('test'),
),
],
),
),
您可以使用 Expanded
widget with flex
属性.
我是这样做的:
//with dart 2 new and const keywords are optional
void main() => runApp(new MaterialApp(home: new HomePage(),));
class HomePage extends StatelessWidget {
final text = new Text('Text here', style: new TextStyle(fontSize: 50.0),);
final margin = const EdgeInsets.only(bottom: 10.0, right: 10.0, left: 10.0);
final backColor = Colors.lightGreen;
@override
Widget build(BuildContext context) {
var width = MediaQuery.of(context).size.width; // Using this line I got the device screen width
return new Scaffold(
body: new SafeArea(//I didnt add appbar. this will add necessary padding for status bar.
child: new Column(
children: [
new Expanded(
flex: 2,
child: new Container(
width: width /1.5, // this will give you flexible width not fixed width
margin: margin, // variable
color: backColor,// variable
child: new Column(
children: <Widget>[
new Expanded(
flex: 1,
child: new Container(
alignment: Alignment.topCenter,
child: text, //varaible above
),
),
new Expanded(
flex: 1,
child: new Container(
alignment: Alignment.bottomCenter,
child: text, //variable above
),
),
],
),
),
),
new Expanded(
flex: 3,
child: new Container(
width: width /1.5, // this will give you flexible width not fixed width
margin: margin, //variable
color: backColor,//variable
),
),
],
),
),
);
}
}
我正在尝试创建类似于下图的内容,其中有两个容器,一个占屏幕的 40%,另一个占屏幕的其余部分。
在顶部容器中,我希望在顶部有一个文本,在底部有一个文本,左对齐。
我有这个:
// main page body
body: Container(
child: Column(
children: [
// top container
new Expanded(
child: null, // todo, add the two texts,
),
// bottom container
new Container(
height: 400.0, // this needs to be 60% of the page
child: new Text('test'),
),
],
),
),
您可以使用 Expanded
widget with flex
属性.
我是这样做的:
//with dart 2 new and const keywords are optional
void main() => runApp(new MaterialApp(home: new HomePage(),));
class HomePage extends StatelessWidget {
final text = new Text('Text here', style: new TextStyle(fontSize: 50.0),);
final margin = const EdgeInsets.only(bottom: 10.0, right: 10.0, left: 10.0);
final backColor = Colors.lightGreen;
@override
Widget build(BuildContext context) {
var width = MediaQuery.of(context).size.width; // Using this line I got the device screen width
return new Scaffold(
body: new SafeArea(//I didnt add appbar. this will add necessary padding for status bar.
child: new Column(
children: [
new Expanded(
flex: 2,
child: new Container(
width: width /1.5, // this will give you flexible width not fixed width
margin: margin, // variable
color: backColor,// variable
child: new Column(
children: <Widget>[
new Expanded(
flex: 1,
child: new Container(
alignment: Alignment.topCenter,
child: text, //varaible above
),
),
new Expanded(
flex: 1,
child: new Container(
alignment: Alignment.bottomCenter,
child: text, //variable above
),
),
],
),
),
),
new Expanded(
flex: 3,
child: new Container(
width: width /1.5, // this will give you flexible width not fixed width
margin: margin, //variable
color: backColor,//variable
),
),
],
),
),
);
}
}