positioning - 如何在 Flutter 中以 60%/40% 的比例拆分两个容器并将文本放置在容器的底部？

Question

我正在尝试创建类似于下图的内容，其中有两个容器，一个占据屏幕的 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'),
        ),
      ],
    ),
  ),

Answer 1

您可以使用 Expanded带有 flex 的小部件属性(property)。

我是这样做的:

//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
            ),
          ),
        ],
      ),
      ),
    );
  }
}