布局

布局

什么东西与 StackLayout 等效?

在 Xamarin.Forms 中，可以创建一个带水平或垂直方向的 StackLayout 。Flutter 也有类似的方法，不过您将使用 Row 或 Column widget。

如果您注意到除了“Row” 和“Column” widget 之外，这两个代码示例是相同的。这些子元素是相同的，可以利用这个特性开发丰富的布局，这些布局可以随着时间的推移而改变。

@overrideWidget build(BuildContext context) {  return new Row(    mainAxisAlignment: MainAxisAlignment.center,    children: <Widget>[      new Text('Row One'),      new Text('Row Two'),      new Text('Row Three'),      new Text('Row Four'),    ],  );}

@overrideWidget build(BuildContext context) {  return new Column(    mainAxisAlignment: MainAxisAlignment.center,    children: <Widget>[      new Text('Column One'),      new Text('Column Two'),      new Text('Column Three'),      new Text('Column Four'),    ],  );}

什么东西与网格（Grid）等价?

与Grid最接近的对等项是 GridView。这比您在 Xamarin.Forms 中习惯使用的功能强大得多。GridView 在内容超出其可视空间时自动滚动。

GridView.count(
  // Create a grid with 2 columns. If you change the scrollDirection to
  // horizontal, this would produce 2 rows.
  crossAxisCount: 2,
  // Generate 100 widgets that display their index in the List
  children: List.generate(100, (index) {
    return Center(
      child: Text(
        'Item $index',
        style: Theme.of(context).textTheme.headline,
      ),
    );
  }),
);

您可能在 Xamarin.Forms 中使用 Grid 来实现覆盖其他 widget 的 widget。在 Flutter 中，您可以使用 Stack widget 来完成这一操作。

这个示例创建了两个相互重叠的图标。

child: new Stack(
  children: <Widget>[
    new Icon(Icons.add_box, size: 24.0, color: const Color.fromRGBO(0,0,0,1.0)),
    new Positioned(
      left: 10.0,
      child: new Icon(Icons.add_circle, size: 24.0, color: const Color.fromRGBO(0,0,0,1.0)),
    ),
  ],
),

有什么等同于 ScrollView ？

在 Xamarin.Forms 中，ScrollView 封装了 VisualElement ，如果内容大于设备屏幕，它就会滚动。

在 Flutter 中，最接近的是 SingleChildScrollView widget。您只需用想要可滚动的内容来填充 widget。

@overrideWidget build(BuildContext context) {  return new SingleChildScrollView(    child: new Text('Long Content'),  );}

如果您想在滚动条中包含许多项，即使是不同的Widget类型，也可以使用 ListView。这可能看起来有点过火，但在 Flutter 中，它比 Xamarin.Forms 的回到平台特定控件的 ListView 优化得多，松散得多。

@overrideWidget build(BuildContext context) {  return new ListView(    children: <Widget>[      new Text('Row One'),      new Text('Row Two'),      new Text('Row Three'),      new Text('Row Four'),    ],  );}

在 Flutter 中如何处理横向过渡 ?

通过在 AndroidManifest.xml 中设置 configChanges 属性，可以自动处理横向转换。

android:configChanges="orientation|screenSize"