Flutter（七）：Stack

1 基本用法

import 'package:flutter/material.dart';

import 'res/listData.dart';

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

// 自定义组件
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return MaterialApp(
      // Scaffold 定义导航头部和页面主要内容
      home: Scaffold(
        appBar: AppBar(
          title: Text('flutter 标题'),
        ),
        body: HomePage(),
      ),
      theme: ThemeData(
        primarySwatch: Colors.green,
      ),
    );
  }
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Stack(
        alignment: Alignment.center, // 设置 children 里面的所有组件都居中，跟顺序有关
        children: <Widget>[
          Container(
            width: 300,
            height: 300,
            color: Colors.orange,
          ),
          Text('标题', style: TextStyle(fontSize: 40, color: Colors.white))
        ],
      ),
    );
  }
}

效果

• Alignment 指定参数

参数 从 -1 ～ 1 之间，可以为小数点，也能够实现上面的效果，同时可以指定组件在任何方位。

import 'package:flutter/material.dart';

import 'res/listData.dart';

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

// 自定义组件
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return MaterialApp(
      // Scaffold 定义导航头部和页面主要内容
      home: Scaffold(
        appBar: AppBar(
          title: Text('flutter 标题'),
        ),
        body: HomePage(),
      ),
      theme: ThemeData(
        primarySwatch: Colors.green,
      ),
    );
  }
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Stack(
        alignment: Alignment(0, 0), // Alignment 指定参数 从 -1 ～ 1 之间
        children: <Widget>[
          Container(
            width: 300,
            height: 300,
            color: Colors.orange,
          ),
          Text('标题', style: TextStyle(fontSize: 40, color: Colors.white))
        ],
      ),
    );
  }
}

2 Stack 配合 Align

import 'package:flutter/material.dart';

import 'res/listData.dart';

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

// 自定义组件
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return MaterialApp(
      // Scaffold 定义导航头部和页面主要内容
      home: Scaffold(
        appBar: AppBar(
          title: Text('flutter 标题'),
        ),
        body: HomePage(),
      ),
      theme: ThemeData(
        primarySwatch: Colors.green,
      ),
    );
  }
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        height: 300,
        width: 300,
        color: Colors.pink,
        child: Stack(
          children: <Widget>[
            Align(
              alignment: Alignment(-1, -1),
              child: Icon(Icons.home, size: 40, color: Colors.white),
            ),
            Align(
              alignment: Alignment(0, 0),
              child: Icon(Icons.search, size: 40, color: Colors.white),
            ),
            Align(
              alignment: Alignment(1, 1),
              child: Icon(Icons.settings, size: 40, color: Colors.white),
            ),
          ],
        ),
      ),
    );
  }
}

效果

3 Stack 配合 Positioned

使用 Stack 配合 Positioned 也能实现上面的效果。

import 'package:flutter/material.dart';

import 'res/listData.dart';

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

// 自定义组件
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return MaterialApp(
      // Scaffold 定义导航头部和页面主要内容
      home: Scaffold(
        appBar: AppBar(
          title: Text('flutter 标题'),
        ),
        body: HomePage(),
      ),
      theme: ThemeData(
        primarySwatch: Colors.green,
      ),
    );
  }
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        height: 300,
        width: 300,
        color: Colors.pink,
        child: Stack(
          children: <Widget>[
            Positioned(
              left: 0,
              top: 0,
              child: Icon(Icons.home, size: 40, color: Colors.white),
            ),
            Positioned(
              left: 130,
              top: 130,
              child: Icon(Icons.search, size: 40, color: Colors.white),
            ),
            Positioned(
              right: 0,
              bottom: 0,
              child: Icon(Icons.settings, size: 40, color: Colors.white),
            ),
          ],
        ),
      ),
    );
  }
}