Flutter开发笔记04 - Flutter_Widget布局控件笔记

 GitHub Demo 地址：https://github.com/LINGLemon/lxf_flutter_demo

1、Stack

Stack即层叠布局控件，能够将子控件层叠排列。Stack控件的每一个子控件都是定位或不定位，定位的子控件是被Positioned控件包裹的。Stack控件本身包含所有不定位的子控件，其根据alignment定位（默认为左上角）。然后根据定位的子控件的top、right、bottom和left属性将它们放置在Stack控件上。

import 'package:flutter/material.dart';
class StackDemo extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text("层叠布局"),
      ),
      body: new Center(
        child: new Stack(
          children: <Widget>[
            new Image.asset("images/hua3.png"),
            new Positioned(
                left:85.0,
              right: 35.0,
              top: 55.0,
              child:new Text(
                  "Hello World!",
                style: new TextStyle(
                  color: Colors.red,
                  fontSize: 20.0,
                  fontFamily: "serif"
                ),
            )
            )],
        ),
      ),
    );
  }
}
void main(){
  runApp(new MaterialApp(
    title: "层叠布局实例",
    theme: new ThemeData(primaryColor: Colors.deepOrange),
    home: new StackDemo(),
  ));
}

下图是使用stack实现一个带背景的appbar。

2、Scaffold

Scaffold 实现了基本的 Material 布局。只要是在 Material 中定义了的单个界面显示的布局控件元素，都可以使用 Scaffold 来绘制。

提供展示导航栏, 抽屉（drawers，比如：左边栏）、通知（snack bars） 以及 底部按钮（bottom sheets）。

我们可以将 Scaffold 理解为一个布局的容器。可以在这个容器中绘制我们的用户界面。

@override
Widget build(BuildContext context) {
    return new Scaffold(
        appBar: new AppBar(
            title: new Text('应用'),
        ),
        body: new Center(
            child: new Text('Hello'),
        ),
    );
}

3、Expanded

只有一个子 Widget。在 Column 和 Row 中充满
Container只能根据里面容器大小来设置高度，而Expanded能够向下寻找可用的布局

import 'package:flutter/material.dart';

class Layout2Page extends StatefulWidget {
  @override
  _LayoutPage2State createState() => _LayoutPage2State();
}

class _LayoutPage2State extends State<Layout2Page> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('haha'),),
      body: Column(
        children: <Widget>[
          Text('列表'),
          Expanded(   // Container只能根据里面容器大小来设置高度，而Expanded能够向下寻找可用的布局
            child: Container(
              decoration: BoxDecoration(color: Colors.red),
              child: Text('竖直拉伸高度'),
            ),
          ),
        ],
      ),
    );
  }
}