如何在颤动中格式化行？

Question

IM 试图弄清楚如何更改我的代码，看起来就是这样 enter image description here

我的样子 enter image description here

这是我的代码

    return Row(crossAxisAlignment: CrossAxisAlignment.start, children: [
      GestureDetector(
        onTap: () {
          DatbaseService.instance.createorGetConversation(uid, uid,
              (String _conversationID) {
            NavigationService.instance.navigateToRoute(
              MaterialPageRoute(builder: (context) {
                return MeineBeitraege(
                  _conversationID,
                  widget.uid,
                  widget.username,
                  widget.url,
                  widget.email,
                );
              }),
            );
          });
        },
        child: Container(
          child: ClipOval(
            child: Container(
                height: 35,
                width: 35,
                decoration: BoxDecoration(
                  color: Colors.white,
                ),
                child: widget.url != null && widget.url != 'profilepictureer'
                    ? Image.network(
                        widget.url,
                        fit: BoxFit.cover,
                      )
                    : Image.asset(
                        'assets/profilepictureer.png') // Your widget is here when image is no available.
                ),
          ),
          decoration: new BoxDecoration(
              shape: BoxShape.circle,
              border: new Border.all(color: Colors.black, width: 3)),
        ),
      ),
      Column(children: [
        RichText(
          text: TextSpan(
            text: widget.username, // _snapshot.data['username']
            style: TextStyle(fontWeight: FontWeight.bold, color: Colors.black),

            children: <InlineSpan>[
              WidgetSpan(
                  alignment: PlaceholderAlignment.baseline,
                  baseline: TextBaseline.alphabetic,
                  child: SizedBox(width: 4)),
              TextSpan(
                //"${comment.data()['comment']}"
                text: widget.comment,
                style: TextStyle(
                  fontWeight: FontWeight.normal,
                ),
              )
            ],
          ),
        ),
        Row(
          children: [
            Text(widget.timeago),
            SizedBox(width: 10),
            Text('${widget.commentlikes} likes'),
            SizedBox(width: 10),
            InkWell(
              onTap: () {
                widget.onTap();
                if (!widget.focusNode.hasPrimaryFocus) {
                  setState(() {
                    FocusScope.of(context).requestFocus(widget.focusNode);
                  });
                }
              },
              child: Text('Reply'),
            ),
          ],
        ),
           widget.commentcount != null && widget.commentcount > 0
            ? Container(
                child: Align(
                  alignment: Alignment.topCenter,
                  child: TextButton(
                    onPressed: () {},
                    style: TextButton.styleFrom(
                      primary: Colors.grey,
                    ),
                    child: InkWell(
                        onTap: () {
                          if (viewreplies) {
                            setState(() {
                              viewreplies = false;
                            });
                          } else {
                            setState(() {
                              viewreplies = true;
                            });
                          }
                        },
                        child: viewreplies == true
                            ? Text(
                                '———View replies(${widget.commentcount})',
                                style: TextStyle(fontSize: 13),
                              )
                            : Text(
                                '———Hide replies(${widget.commentcount})',
                                style: TextStyle(fontSize: 13),
                              )),
                  ),
                ),
              )
            : Container(),
     
      ]),
      
      const Spacer(),
      InkWell(
        onTap: () => likecomment(widget.commentdataid),
        child: widget.likes.contains(uid)
            ? Icon(
                Icons.star,
                size: 25,
                color: Colors.yellow,
              )
            : Icon(
                Icons.star_border_outlined,
                size: 25,
              ),
      )
    ]);

然后我想要的是与 instagram 在点击 ViewReplies 时完全相同的功能，我想显示 cmets 的 ht cmets。希望任何人都可以提供帮助。如果您需要更多信息，请发表评论

好的，这是我更新的代码。首先是一个 lsitviewbuidler

----- - - - -- 
return Listviewbuilder
---- - - - -
child: Column(children: [
                                          CommentsWidget(

那么 cmetswidget 就是有状态的 Lisle 分隔符

 @override
  Widget build(BuildContext context) {
    final wi = MediaQuery.of(context).size.width;
    return Column(
          children:[

           ListTile( -------)
-- - -- - - 
CommentsComments(),

CommentsComments() 再次是第二个列表视图，与第二个 listtile 处于单独的有状态

 @override
  Widget build(BuildContext context) {
return Container(
        width: MediaQuery.of(context).size.width,
        height: MediaQuery.of(context).size.height,
        child: Column(
          children: [
            Expanded(
   child: StreamBuilder(
        stream: FirebaseFirestore.instance
            .collection('videos')
            .doc(widget.videoid)
            .collection('comments')
            .doc(widget.id)
            .collection("commentcomment")
            .orderBy('time', descending: true)
            .snapshots(),
        builder: (BuildContext context, snapshot) {
          if (snapshot.hasData) {
            return SingleChildScrollView(
              child: Container(
                child: ListView.builder(
    --...
ListTile()

 

Answer 1

要创建类似 Instagram 的评论部分 UI，您可以查看以下代码。 我添加了一个硬编码列表用于显示目的，您可以插入您自己的服务器数据，并使用逻辑来区分两个列表视图。 对于这个 UI，我创建了一个普通的评论对象，在回复列表中包含对该用户的所有回复，例如

single user comment object
    {
          'name': 'person 1',
          'message': 'Some text message from person 1',
          'replies': [
            {
              'name': 'person 2',
              'message': 'Some text message from person 2',
            },
            {
              'name': 'person 3',
              'message': 'Some text message from person 3',
            },
          ]
        },

---

import 'package:flutter/material.dart';

final Color darkBlue = Color.fromARGB(255, 18, 32, 47);

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.dark().copyWith(scaffoldBackgroundColor: darkBlue),
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Center(
          child: MyWidget(),
        ),
      ),
    );
  }
}

class MyWidget extends StatelessWidget {
  final List<dynamic> commentList = [
    {
      'name': 'person 1',
      'message': 'Some text message from person 1',
      'replies': [
        {
          'name': 'person 2',
          'message': 'Some text message from person 2',
        },
        {
          'name': 'person 3',
          'message': 'Some text message from person 3',
        },
      ]
    },
    {
      'name': 'person 4',
      'message': 'Some text message from person 4',
      'replies': []
    },
    {
      'name': 'person 5',
      'message': 'Some text message from person 5',
      'replies': [
        {
           'name': 'person 6',
          'message': 'Some text message from person 6',
        }
      ]
    }
  ];
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
        title: Text("Hello World"),),
        body: ListView.builder(
            padding: const EdgeInsets.all(0.0),
            shrinkWrap: true,
            itemCount: commentList.length,
            itemBuilder: (context, index) {
              return Column(children: [
                ListTile(
                  contentPadding: const EdgeInsets.symmetric(horizontal: 8.0),
                  title: Text(commentList[index]['name']),
                  leading: Icon(Icons.fiber_new),
                ),
                ListView.builder(
                    shrinkWrap: true,
                    physics: const NeverScrollableScrollPhysics(),
                    padding: const EdgeInsets.all(0.0),
                    itemCount: commentList[index]['replies'].length ?? 0,
                    itemBuilder: (context, i) {
                      return ListTile(
                        contentPadding:
                            const EdgeInsets.symmetric(horizontal: 24.0),
                         leading: Icon(Icons.pages),
                        title: Text(commentList[index]['replies'][i]['name'] ),
                      );
                    })
              ]);
            }));
  }
}

在 dartpad 中运行此线并根据您的用途对其进行重构。