flutter - 无法在颤动中显示到堆栈内的容器

Question

在我的 Flutter 项目中，我正在尝试创建一个类似屏幕的 whatsapp。我正在将容器放入堆栈中。

我的堆栈有两个容器。第一个容器具有列表生成器。第二个容器有一行返回一个文本字段和 3 个按钮。

我已将对齐方式作为底部中心。我面临的问题是第二个容器正在显示。如果我将对齐设置为不同的（右中或上中）它正在工作。但是底部中心不起作用。请任何人帮助解决问题

class ChatScreen extends StatelessWidget {
  // const ChatScreen({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Stack(
      alignment: Alignment.bottomCenter,
      children: [
        Expanded(child: Container(
          margin: EdgeInsets.only(bottom: 50),
          height: getHeight(context),
          child: Messages(),
        ),),


        Container(
          color: Colors.black,
          margin: EdgeInsets.only(bottom: 30),
          child: NewMessage(),
        ),
      ],
    );
  }
}

我的消息类是

class Messages extends StatelessWidget {
  const Messages({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return ListView.builder(
        //  physics: NeverScrollableScrollPhysics(),
        // shrinkWrap: true,
        itemCount: 10,
        itemBuilder: (ctx, index) => MessageBubble(
            'It always seems impossible until it is done.',
            'https://www.gettyimages.in/gi-resources/images/500px/983794168.jpg',
            false));
  }
}

我的消息泡泡

class MessageBubble extends StatelessWidget {
  // const MessageBubble({Key key}) : super(key: key);
  MessageBubble(this.message, this.imageUrl, this.isme);
  final String message;
  final String imageUrl;
  final bool isme;

  @override
  Widget build(BuildContext context) {
    return Padding(
        padding: isme ? const EdgeInsets.only(right: 40) : const EdgeInsets.only(left: 40) ,
    child: Stack(
      alignment: isme ? Alignment.bottomRight : Alignment.bottomLeft,
      children:
    [
      Row
        (
    mainAxisAlignment:
    isme ? MainAxisAlignment.end : MainAxisAlignment.start,
      children: [

        Container(
          decoration: BoxDecoration(
            color: isme ? Color(0xFFf3ca20) : Color(0xff78849e),
            borderRadius: BorderRadius.only(
              topLeft: Radius.circular(30),
              topRight: Radius.circular(30),
              bottomLeft: !isme ? Radius.circular(0) : Radius.circular(30),
              bottomRight: isme ? Radius.circular(0) : Radius.circular(30),
            ),
          ),
          width: 300,
          height: 60,
          padding: EdgeInsets.symmetric(
            vertical: 10,
            horizontal: 16,
          ),
          margin: EdgeInsets.symmetric(vertical: 24, horizontal: 8),
          child: Text(
            message,
            textAlign: TextAlign.center,
            style: TextStyle(
                color: isme
                    ? Colors.white
                    : Theme.of(context).accentTextTheme.headline1.color),
          ),
        ),

      ],
    ),
      Positioned(
        left: isme ? null :  -40,
        right: isme ? -40 : null,
        child: CircleAvatar(backgroundImage: NetworkImage(imageUrl),),
      ),
    ],
      clipBehavior: Clip.none,
    ),
    );

  }
}

我的新消息是

class _NewMessageState extends State<NewMessage> {
  var _enteredMessage = '';
  void _sendMessage() async {
    // Focus.of(context).unfocus();
    // final user = await FirebaseAuth.instance.currentUser;
    // FirebaseFirestore.instance.collection('Chat').add({
    //   'text': _enteredMessage,
    //   'createdAt': Timestamp.now(),
    //   'userId': user.uid,
    // });
  }
  @override
  Widget build(BuildContext context) {
    return Container(
      height: 50,
      margin: EdgeInsets.only(top: 8),
      padding: EdgeInsets.all(8),
      child: Row(
        children: <Widget>[
          IconButton(
            color: Color(0xFFf3ca20),
            icon: Icon(
              Icons.mic_rounded,
            ),
            // onPressed: _enteredMessage.trim().isEmpty ? null : _sendMessage)
            onPressed: () {},
          ),
          IconButton(
            color: Color(0xFFf3ca20),
            icon: Icon(
              Icons.camera_alt_outlined,
            ),
            // onPressed: _enteredMessage.trim().isEmpty ? null : _sendMessage)
            onPressed: () {},
          ),
          Expanded(
            child: TextField(
              cursorColor: Colors.white,
              decoration: InputDecoration(
                hintText: 'Type Text Here',
                hintStyle: Theme.of(context).textTheme.caption.copyWith(
                      fontSize: 15,
                      fontWeight: FontWeight.w600,
                      color: Colors.white,
                    ),
                enabledBorder: UnderlineInputBorder(
                  borderSide: BorderSide(color: Colors.white),
                ),
                focusedBorder: UnderlineInputBorder(
                  borderSide: BorderSide(color: Colors.white),
                ),
              ),
              onChanged: (value) {
                setState(() {
                  _enteredMessage = value;
                });
              },
            ),
          ),
          IconButton(
            color: Color(0xFFf3ca20),
            icon: Icon(
              Icons.send,
            ),
            // onPressed: _enteredMessage.trim().isEmpty ? null : _sendMessage)
            onPressed: () {},
          ),
        ],
      ),
    );
  }
}

标签： flutterlistviewstackflutter-layout