将Flutter像画布一样呈现到屏幕上。如何实现这种布局？

Question

希望实现以下布局。我认为制作表格（图3）很容易，但是渲染重叠的元素会很棘手。您会推荐我使用什么？颤振是为这种任务而建造的吗？

Answer 1

没有实际上，这样做很容易。使用Stack Widget。它可以作为子项Position Widgets，您可以用它指定任何小部件的位置。

您现在可以使用我写的dartpad的要旨尝试使用此功能>

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text("Overlay Widgets")),
        body: SafeArea(
          child: Center(
            child: Stack(
              children: <Widget>[
                MessageBubble(
                    message: _message, sender: "Fonkam Loic", isMe: true),
                MessageBubble(
                    message: "What is Lorem Ipsum", sender: "You", isMe: false),
              ],
            ),
          ),
        ),
      ),
    );
  }

  final String _message =
      "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book... ";
}

class MessageBubble extends StatelessWidget {
  MessageBubble({this.message, this.sender, this.isMe});
  final String message, sender;
  final bool isMe;
  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: EdgeInsets.all(8.0),
      child: Column(
        crossAxisAlignment:
            isMe ? CrossAxisAlignment.end : CrossAxisAlignment.start,
        children: <Widget>[
          Text(
            sender,
            style: TextStyle(
              color: Colors.black54,
              fontSize: 12,
            ),
          ),
          Material(
            borderRadius: isMe
                ? BorderRadius.only(
                    topLeft: Radius.circular(30),
                    bottomLeft: Radius.circular(30),
                    bottomRight: Radius.circular(30))
                : BorderRadius.only(
                    topRight: Radius.circular(30),
                    bottomLeft: Radius.circular(30),
                    bottomRight: Radius.circular(30)),
            elevation: 5.0,
            color: isMe ? Colors.lightBlueAccent : Colors.white,
            child: Padding(
              padding: EdgeInsets.all(10.0),
              child: Padding(
                padding: EdgeInsets.symmetric(horizontal: 3.0, vertical: 7.0),
                child: Text(
                  message,
                  style: TextStyle(
                      fontSize: 20.0,
                      color: isMe ? Colors.white : Colors.black),
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }
}