Flutter：布局

布局

注意点

1. column所占空间的决定因素：元素长度？alignment？?
   例如：
   如果使用Column来做整体布局，设置图片时需要注意Column所占的空间。比如：

class layout extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Column(
      crossAxisAlignment: CrossAxisAlignment.stretch,
      children: <Widget>[
        new Image.asset(
          'images/image1.png',
          height: 250.0,
          fit: BoxFit.fill,
        ),
        new layoutTitle(),
      ],
    );
  }
}

如果不设置下面这句

crossAxisAlignment: CrossAxisAlignment.stretch,

则页面是这样的：

Column

2.Expanded()的作用??自适应的具体规则是？
使Expanded中的child保持可扩展性，而不是sizeToFit(自适应大小)
例如：

class layoutTitle extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Container(
      padding: const EdgeInsets.all(32),
      child: new Row(
        children: <Widget>[
          new Expanded(
            child:
            new twoLinesTextView(),
          ),
//          new Expanded(
//          child:
          new startView(),
//          )
        ],
      ),
    );
  }
}

结果：

Expanded

如果不使用Expande包裹住twoLinesTextView，结果：

Expanded

如果startView和twoLinesTextView两个都使用Expanded包裹：

Expanded

备注：文字展现不全的问题还与Text空间的softWrap属性有关

几个步骤
只需几个步骤即可在屏幕上放置文本，图标或图像。
可见widget添加到布局widget.
所有布局widget都有一个child属性（例如Center或Container），或者一个 children属性，如果他们需要一个widget列表（例如Row，Column，ListView或Stack）。

1. 选择一个widget来保存该对象（布局widget）

2. 创建一个widget来容纳可见对象（可见widget）

3. 将可见widget添加到布局widget.
   所有布局widget都有一个child属性（例如Center或Container），或者一个 children属性，如果他们需要一个widget列表（例如Row，Column，ListView或Stack）。

4. 将布局widget添加到页面.
   Flutter应用本身就是一个widget，大部分widget都有一个build()方法。在应用程序的build方法中创建会在设备上显示的widget。 对于Material应用程序，您可以将Center widget直接添加到body属性中

混合使用widget？？？

在设计用户界面时，您可以使用标准widget库中的widget，也可以使用Material Components中的widget。 您可以混合使用两个库中的widget，可以自定义现有的widget，也可以构建一组自定义的widget。

// 这个App没有使用Material组件,  如Scaffold.
// 一般来说, app没有使用Scaffold的话，会有一个黑色的背景和一个默认为黑色的文本颜色。
// 这个app，将背景色改为了白色，并且将文本颜色改为了黑色以模仿Material app
import 'package:flutter/material.dart';

void main() {
  runApp(new MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Container(
      decoration: new BoxDecoration(color: Colors.white),
      child: new Center(
        child: new Text('Hello World',
            textDirection: TextDirection.ltr,
            style: new TextStyle(fontSize: 40.0, color: Colors.black87)),
      ),
    );
  }
}

MaterialApp默认的文字方向

默认文字方向

文字方向