flutter - 将子容器定位在分数位置

Question

如何在堆栈内的特定(小数)位置放置一个具有设定大小的正方形？

我可以求助于画家，但我想看看是否可以使用 Widgets。

Answer 1

您可以在设置大小的 Container 中使用 DecoratedBox 来绘制一个正方形并将其放置在 Stack 中的任何位置，方法是将其包裹在Alignment 或 Positioned 小部件:

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Flutter Demo',
      theme: new ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: new StackExamplePage(),
    );
  }
}

class StackExamplePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
        backgroundColor: Colors.grey,
        appBar: new AppBar(
            title: new Text('Stack Example')
        ),
        body: _createStack()
    );
  }

  _createStack() {
    return new Stack(
        children: <Widget>[
          new Image.network(
            'https://i.imgur.com/FsXL8vI.jpg',
          ),
          // Black square centered in stack
          new Align(
            alignment: new Alignment(0.0, 0.0),
            child: new Container(
              height: 50.0,
              width: 50.0,
              child: new DecoratedBox(
                decoration: new BoxDecoration(
                    color: Colors.black
                ),
              ),
            ),
          ),
          new Align(
            // alignment: Alignment.topLeft,
            alignment: const Alignment(-1.0, -1.0),
            child: new Text('Top Left',
                style: new TextStyle(color: Colors.yellow)),
          ),
          new Align(
            // alignment: Alignment.bottomRight,
            alignment: const Alignment(1.0, 1.0),
            child: new Text('Bottom Right',
                style: new TextStyle(color: Colors.yellow)),
          ),
          new Align(
            alignment: new Alignment(-0.8, -0.8),
            child: new Text(
                '10% in', style: new TextStyle(color: Colors.yellow)),
          ),
          new Align(
            alignment: new Alignment(0.8, 0.8),
            child: new Text(
                '90% in', style: new TextStyle(color: Colors.yellow)),
          ),
        ]
    );
  }
}