Flutter Whatsapp回復小部件設計

Question

我正在嘗試創建一個類似whatsapp的聊天視圖，在聊天消息中有一個回復消息框......如下

我面臨的問題是將左側棕色垂直邊框框擴展到其右側列（帶有動態文本）的高度。

我使用下面的固有高度選項使其工作

IntrinsicHeight(
  child: Row(
    mainAxisAlignment: MainAxisAlignment.start,
    children: [
      Container(
        width: 4,
        // constraints: BoxConstraints.expand(width: 4),
        decoration: BoxDecoration(
          color: _postColor,
          borderRadius: const BorderRadius.only(
              topLeft: const Radius.circular(4.0),
              bottomLeft: const Radius.circular(4.0)),
        ),
      ),
      Expanded(
        child: Padding(
          padding: const EdgeInsets.fromLTRB(6, 4, 8, 4),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Text(msg?.postByName),
              Text(msg?.message ?? ''),
            ],
          ),
        ),
      ),
    ],
  ),
)

由於聊天可能很長，而且回復框很多，我擔心使用昂貴的 IntrinsicHeight 小部件。

我已經嘗試過的：

• 在棕色容器上展開不起作用，因為所有這些都在頁面的可滾動視圖中。 所以擴展使盒子全屏顯示。
• 容器上的約束不起作用，內容消失。
• 在容器上添加邊界是一個想法，但容器不允許彎曲的邊界半徑與邊界。

還有其他想法嗎？

Answer 1

請參考以下代碼

import 'dart:async';

import 'package:flutter/material.dart';
import 'package:flutter_chat_bubble/bubble_type.dart';
import 'package:flutter_chat_bubble/chat_bubble.dart';
import 'package:flutter_chat_bubble/clippers/chat_bubble_clipper_6.dart';

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

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

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage>
    with SingleTickerProviderStateMixin {
  @override
  void initState() {
    super.initState();
  }

  @override
  void dispose() {
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Padding(
        padding: const EdgeInsets.all(8.0),
        child: Column(
          children: [
            ChatBubble(
              padding: EdgeInsets.all(4.0),
              backGroundColor: Colors.greenAccent,
              clipper: ChatBubbleClipper6(
                type: BubbleType.sendBubble,
                nipSize: 5.0,
              ),
              child: Container(
                padding: EdgeInsets.symmetric(
                  horizontal: 5.0,
                  vertical: 4.0,
                ),
                decoration: BoxDecoration(
                  color: Colors.greenAccent,
                  borderRadius: BorderRadius.circular(
                    8.0,
                  ),
                ),
                child: Column(
                  children: [
                    Container(
                      decoration: BoxDecoration(
                        color: Colors.lightGreen,
                        borderRadius: BorderRadius.circular(
                          8.0,
                        ),
                      ),
                      child: Column(
                        children: [
                          IntrinsicHeight(
                            child: Row(
                              children: [
                                Container(
                                  decoration: BoxDecoration(
                                    color: Colors.red,
                                    borderRadius: BorderRadius.only(
                                      bottomLeft: Radius.circular(
                                        8.0,
                                      ),
                                      topLeft: Radius.circular(
                                        8.0,
                                      ),
                                    ),
                                  ),
                                  width: 7.0,
                                ),
                                Expanded(
                                  child: Padding(
                                    padding: const EdgeInsets.all(6.0),
                                    child: Column(
                                      crossAxisAlignment:
                                          CrossAxisAlignment.start,
                                      children: [
                                        Text(
                                          "Title",
                                          style: TextStyle(
                                            fontSize: 18.0,
                                            color: Colors.red,
                                          ),
                                        ),
                                        Text(
                                          "SubTitle Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec,",
                                          style: TextStyle(
                                            fontSize: 14.0,
                                            color: Colors.black,
                                          ),
                                        )
                                      ],
                                    ),
                                  ),
                                )
                              ],
                            ),
                          ),
                        ],
                      ),
                    ),
                    Padding(
                      padding: const EdgeInsets.all(8.0),
                      child: Column(
                        children: [
                          Text(
                              "Text message.....Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec,..........."),
                          SizedBox(
                            height: 5.0,
                          ),
                          Align(
                            alignment: Alignment.bottomRight,
                            child: Text("12:56 PM"),
                          )
                        ],
                      ),
                    ),
                  ],
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}