上一篇我们已经把首页的一个基本框架搭起来了，今天我们继续我们的工作，左侧侧滑菜单已经有了，我们就为它加载上相应的页面吧。我们在看知乎的时候，你会发现，首页，发现，关注，收藏，草稿这五项，你在点击之后进入到相应页面之后，侧滑菜单还在，你左侧滑一下，这个侧滑菜单还在，而提问，左滑屏幕，这个页面就没有，有点像返回上一页的感觉。
从操作来看，五页面应该是fragment之间的切换，而提问是单独的activity。
我们先从几个fragment入手，这里我们建立五fragment页，选择继承自android.support.v4.app.Fragment，因为这五个页面基本上都一样，就是简单的一个布局，然后显示一个标题。分别是
首页： IndexFragment.java
发现： FindFragment.java
关注： AttentionFragment.java
收藏： CollectionFragment.java
草稿： DraftFragment.java
代码就以首页为例：

fragment_index.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <TextView
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:text="我是首页"
        android:gravity="center"/>
</LinearLayout>

IndexFragment.java

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
 * Created by cg on 2015/10/27.
public class IndexFragment extends Fragment {
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.fragment_index,container,false);
        return view;

    fragment页面之间的切换，这个大家都会，这里就不细说了，如果有感觉这方面还不是很明确的，给推荐一个blog，里面说的很不错。http://blog.csdn.net/lmj623565791/article/details/42628537 

    这里我要强调的是，一般我们来进行fragment页面切换的时候，都是采用replace方法，进行切换，其实replace方就是remove方法和add方法的一个合体，使我们的代码变得简单了。可是这里就出现一个问题，这个方法，是移除与添加，也就是说，我们在切换的时候，它会重新加载，也就是说如果是读取数据，它就会重新去读数据，重新加载。这个在读本地数据库的时候，可能不算什么，可是在读网络数据的时候，这就浪费了流量，所以我们不能使用这个方法，我们这里使用hide,show,方法，用隐藏和显示的方法来进行切换。下面是一个通用的方法，代码如下： 
     * 当fragment进行切换时，采用隐藏与显示的方法加载fragment以防止数据的重复加载
     * @param from
     * @param to
    public void switchContent(Fragment from, Fragment to) {
        if (isFragment != to) {
            isFragment = to;
            FragmentManager fm = getSupportFragmentManager();
            //添加渐隐渐现的动画
            FragmentTransaction ft = fm.beginTransaction();
            if (!to.isAdded()) {    // 先判断是否被add过
                ft.hide(from).add(R.id.frame_main, to).commit(); // 隐藏当前的fragment，add下一个到Activity中
            } else {
                ft.hide(from).show(to).commit(); // 隐藏当前的fragment，显示下一个
   好，我们解决了fragment切换的问题，哪么下面我们就要来看一下，如何去触发这个方法，当我们点击左侧侧滑菜单按钮的时候，我们如何去进行触发这个点击事件呢。
其实也很简单，我们只要在侧滑菜单页页，定义一个点击事件的接口，然后让mainActivity页面，implements它就行了，
我们来修改一下我们的tool_NavigationDrawerFragment.java。代码如下：
 
import android.app.Fragment;
import android.content.res.TypedArray;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.AdapterView;
import android.widget.ListView;
import com.example.cg.zhihu_one.Adapters.Main_Drawer_lv_Adapter;
import com.example.cg.zhihu_one.models.MainDrawerMenu;
import java.util.ArrayList;
import java.util.List;
 * 左侧侧滑页面
 * Created by cg on 2015/10/23.
public class tool_NavigationDrawerFragment extends Fragment {
    private ListView lv_main_drawer_leftmenu;                                                 //定义菜单的listView
    private List<MainDrawerMenu> list_menu;
     *  设置菜单点击接口，以方便外部Activity调用
    public interface menuClickListener
        void menuClick(String menuName);
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.fragment_main_drawer,container,false);
        initleftMenuContral(view);
        return view;
     * 初始化左侧菜单列表listView,并为菜单，设置点击事件
     * @param view
    private void initleftMenuContral(View view) {
        lv_main_drawer_leftmenu = (ListView)view.findViewById(R.id.lv_main_drawer_leftmenu);
        list_menu = getMenuItem();
        lv_main_drawer_leftmenu.setAdapter(new Main_Drawer_lv_Adapter(getActivity(),list_menu));
        lv_main_drawer_leftmenu.setOnItemClickListener(new AdapterView.OnItemClickListener() {
            @Override
            public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
                if(getActivity() instanceof menuClickListener)
                    ((menuClickListener)getActivity()).menuClick(list_menu.get(position).getMainDrawer_menuName());
     * 从arrays.xml中取出数据，装入list<T>中
     * @return
    private List<MainDrawerMenu> getMenuItem()
        List<MainDrawerMenu> list_menu = new ArrayList<MainDrawerMenu>();
        String[] itemTitle = getResources().getStringArray(R.array.item_title);
        TypedArray itemIconRes = getResources().obtainTypedArray(R.array.item_icon_res);
        for(int i=0;i<itemTitle.length;i++)
            MainDrawerMenu lmi = new MainDrawerMenu();
            lmi.setMainDrawer_icon(itemIconRes.getResourceId(i,0));
            lmi.setMainDrawer_menuName(itemTitle[i]);
            list_menu.add(lmi);
        return list_menu;
好了，现在我们再来修改一下我们的 MainActivity.java代码。
这里我们要添加三个地方，一是初始的时候，我们把首页的fragment给它加载进去，二是把implements自tool_NavigationDrawerFragment的点击方法实现了，
三是实现页面之间的切换。下面直接看代码吧
<pre name="code" class="java">import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentTransaction;
import android.support.v4.widget.DrawerLayout;
import android.support.v7.app.ActionBarDrawerToggle;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import android.view.Menu;
import android.view.MenuItem;
public class MainActivity extends AppCompatActivity implements tool_NavigationDrawerFragment.menuClickListener {
    private Toolbar toolbar;                             //定义toolbar
    private ActionBarDrawerToggle mDrawerToggle;         //定义toolbar左上角的弹出左侧菜单按钮
    private DrawerLayout drawer_main;                    //定义左侧滑动布局，其实就是主布局
    private IndexFragment iFragment;                     //定义首页fragment
    private FindFragment fFragment;                      //定义发现fragment
    private AttentionFragment aFragment;                 //定义关注fragment
    private CollectionFragment cFragment;                //定义收藏fragment
    private DraftFragment dFragment;                     //定义草稿fragment
    private Fragment isFragment;                         //记录当前正在使用的fragment
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        initToolbar();
        initFragment(savedInstanceState);
     * 初始化Toolbar，并设置Toolbar中的菜单与标题，并与DrawerLayout.DrawerListener相关联，设置动态图标
    public void initToolbar()
        toolbar = (Toolbar)this.findViewById(R.id.toolbar);
        toolbar.setTitle(R.string.menu_index);                     // 标题的文字需在setSupportActionBar之前，不然会无效
        setSupportActionBar(toolbar);
        //为了生成，工具栏左上角的动态图标，要使用下面的方法
        drawer_main = (DrawerLayout) findViewById(R.id.drawer_main);
        mDrawerToggle = new ActionBarDrawerToggle(this, drawer_main, toolbar, R.string.drawer_open,
                R.string.drawer_close);
        mDrawerToggle.syncState();
        drawer_main.setDrawerListener(mDrawerToggle);
    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.menu_main, menu);
        return true;
    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        // Handle action bar item clicks here. The action bar will
        // automatically handle clicks on the Home/Up button, so long
        // as you specify a parent activity in AndroidManifest.xml.
        int id = item.getItemId();
        //noinspection SimplifiableIfStatement
        if (id == R.id.main_toolbar_shuffle) {
            return true;
        return super.onOptionsItemSelected(item);
     * 为页面加载初始状态的fragment
    public void initFragment(Bundle savedInstanceState)
        //判断activity是否重建，如果不是，则不需要重新建立fragment.
        if(savedInstanceState==null) {
            FragmentManager fm = getSupportFragmentManager();
            FragmentTransaction ft = fm.beginTransaction();
            if(iFragment==null) {
                iFragment = new IndexFragment();
            isFragment = iFragment;
            ft.replace(R.id.frame_main, iFragment).commit();
     * 接收左侧侧滑菜单的点击事件
     * @param menuName   菜单名称
    @Override
    public void menuClick(String menuName) {
        getSupportActionBar().setTitle(menuName);                                   //修改Toolbar菜单的名字
        FragmentManager fm = getSupportFragmentManager();
        FragmentTransaction ft = fm.beginTransaction();
        switch (menuName)
            case "首页" :
                if(iFragment!=null) {
                    iFragment = new IndexFragment();
                switchContent(isFragment,iFragment);
                break;
            case "发现" :
                if(fFragment==null)
                    fFragment = new FindFragment();
                switchContent(isFragment,fFragment);
                break;
            case "关注" :
                if(aFragment==null)
                    aFragment = new AttentionFragment();
                switchContent(isFragment,aFragment);
                break;
            case "收藏" :
                if(cFragment==null)
                    cFragment = new CollectionFragment();
                switchContent(isFragment,cFragment);
                break;
            case "草稿" :
                if(dFragment==null)
                    dFragment = new DraftFragment();
                switchContent(isFragment,dFragment);
                break;
            case "提问" :
                break;
        invalidateOptionsMenu();
         * 关闭左侧滑出菜单
        drawer_main.closeDrawers();
     * 当fragment进行切换时，采用隐藏与显示的方法加载fragment以防止数据的重复加载
     * @param from
     * @param to
    public void switchContent(Fragment from, Fragment to) {
        if (isFragment != to) {
            isFragment = to;
            FragmentManager fm = getSupportFragmentManager();
            //添加渐隐渐现的动画
            FragmentTransaction ft = fm.beginTransaction();
            if (!to.isAdded()) {    // 先判断是否被add过
                ft.hide(from).add(R.id.frame_main, to).commit(); // 隐藏当前的fragment，add下一个到Activity中
            } else {
                ft.hide(from).show(to).commit(); // 隐藏当前的fragment，显示下一个
来看一下，我们运行的效果，如图
 
    当我们点击左侧菜单的时候，你会发现里面的fragment进行切换。同时toolbar左上角的标题也跟着变了。左上角的标题主要是代码getSupportActionBar().setTitle(menuName)
;它是用来动态修改toolbar的title的。在initFragment方法有一个很重要的知识点，就是if(savedInstanceState==null)的判断，它的作用就是在我们进行横竖屏切换时不会
出现页面叠加，我在一开始给的blog里面有两个连接也其中一个就是讲这个的，大家有兴趣可以去看一下。
 
   现在我们已经可以很轻松的切换左侧侧滑菜单的各页面了，这时候我们会现一个问题，就是在toolbar上，第一个menu，这个menu在知乎里只有当菜单是发现时，才会出来，
而在别的页面时，它是不会显示的，也就是说，toolbar里面的menu是可以动态改变的。
 
   我们知道，菜单是可以在onCreateOptionsMenu中进行处理的，可是这个方法，有一个问题，它在menu刚建立时才会执行，因此想动态修改menu它是不行的。
    onPrepareOptionsMenu这个方法，是每次点击menu时就会被触发，可是这个方法也是我们用的，因为我们是要点击左侧侧滑菜单来改变menu啊。 

 还有一个方法是invalidateOptionsMenu();这个方法是使原填充的menu无效，那么我们在每次点击侧滑菜单时，加上这句就OK了。 

 MainActivty.java代码如下： 
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentTransaction;
import android.support.v4.widget.DrawerLayout;
import android.support.v7.app.ActionBarDrawerToggle;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import android.view.Menu;
import android.view.MenuItem;
import android.widget.Toast;
public class MainActivity extends AppCompatActivity implements tool_NavigationDrawerFragment.menuClickListener {
    private Toolbar toolbar;                             //定义toolbar
    private ActionBarDrawerToggle mDrawerToggle;         //定义toolbar左上角的弹出左侧菜单按钮
    private DrawerLayout drawer_main;                    //定义左侧滑动布局，其实就是主布局
    private IndexFragment iFragment;                     //定义首页fragment
    private FindFragment fFragment;                      //定义发现fragment
    private AttentionFragment aFragment;                 //定义关注fragment
    private CollectionFragment cFragment;                //定义收藏fragment
    private DraftFragment dFragment;                     //定义草稿fragment
    private Fragment isFragment;                         //记录当前正在使用的fragment
    private boolean isMenuShuffle = false;               //判断是否显示toolbar上的随机菜单
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        initToolbar();
        initFragment(savedInstanceState);
     * 初始化Toolbar，并设置Toolbar中的菜单与标题，并与DrawerLayout.DrawerListener相关联，设置动态图标
    public void initToolbar()
        toolbar = (Toolbar)this.findViewById(R.id.toolbar);
        toolbar.setTitle(R.string.menu_index);                     // 标题的文字需在setSupportActionBar之前，不然会无效
        setSupportActionBar(toolbar);
        //为了生成，工具栏左上角的动态图标，要使用下面的方法
        drawer_main = (DrawerLayout) findViewById(R.id.drawer_main);
        mDrawerToggle = new ActionBarDrawerToggle(this, drawer_main, toolbar, R.string.drawer_open,
                R.string.drawer_close);
        mDrawerToggle.syncState();
        drawer_main.setDrawerListener(mDrawerToggle);
    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.menu_main, menu);
        return true;
    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        switch (item.getItemId())
            case R.id.main_toolbar_search:
                Toast.makeText(this, "main_toolbar_search", Toast.LENGTH_LONG).show();
                break;
            case R.id.main_toolbar_notify:
                Toast.makeText(this, "main_toolbar_notify", Toast.LENGTH_LONG).show();
                break;
            case R.id.main_toolbar_about:
                Toast.makeText(this, "main_toolbar_about", Toast.LENGTH_LONG).show();
                break;
            case R.id.main_toolbar_register:
                Toast.makeText(this,"main_toolbar_register",Toast.LENGTH_LONG).show();
                break;
            case R.id.main_toolbar_shuffle:
                Toast.makeText(this,"main_toolbar_shuffle",Toast.LENGTH_LONG).show();
                break;
        return super.onOptionsItemSelected(item);
    @Override
    public boolean onPrepareOptionsMenu(Menu menu) {
        //Log.e("isMenuShuffle",isMenuShuffle + "");
        if(isMenuShuffle)
            menu.findItem(R.id.main_toolbar_shuffle).setVisible(true);
        }else
            menu.findItem(R.id.main_toolbar_shuffle).setVisible(false);
        return super.onPrepareOptionsMenu(menu);
     * 为页面加载初始状态的fragment
    public void initFragment(Bundle savedInstanceState)
        //判断activity是否重建，如果不是，则不需要重新建立fragment.
        if(savedInstanceState==null) {
            FragmentManager fm = getSupportFragmentManager();
            FragmentTransaction ft = fm.beginTransaction();
            if(iFragment==null) {
                iFragment = new IndexFragment();
            isFragment = iFragment;
            ft.replace(R.id.frame_main, iFragment).commit();
     * 接收左侧侧滑菜单的点击事件
     * @param menuName   菜单名称
    @Override
    public void menuClick(String menuName) {
        getSupportActionBar().setTitle(menuName);                                   //修改Toolbar菜单的名字
        FragmentManager fm = getSupportFragmentManager();
        FragmentTransaction ft = fm.beginTransaction();
        switch (menuName)
            case "首页" :
                if(iFragment!=null) {
                    iFragment = new IndexFragment();
                switchContent(isFragment,iFragment);
                isMenuShuffle = false;
                break;
            case "发现" :
                if(fFragment==null)
                    fFragment = new FindFragment();
                switchContent(isFragment,fFragment);
                isMenuShuffle = true;
                break;
            case "关注" :
                if(aFragment==null)
                    aFragment = new AttentionFragment();
                switchContent(isFragment,aFragment);
                isMenuShuffle = false;
                break;
            case "收藏" :
                if(cFragment==null)
                    cFragment = new CollectionFragment();
                switchContent(isFragment,cFragment);
                isMenuShuffle = false;
                break;
            case "草稿" :
                if(dFragment==null)
                    dFragment = new DraftFragment();
                switchContent(isFragment,dFragment);
                isMenuShuffle = false;
                break;
            case "提问" :
                isMenuShuffle = false;
                /*Intent qIntent = new Intent();
                qIntent.setClass(this,QuestionAcivity.class);
                startActivity(qIntent);*/
                break;
        invalidateOptionsMenu();
         * 关闭左侧滑出菜单
        drawer_main.closeDrawers();
     * 当fragment进行切换时，采用隐藏与显示的方法加载fragment以防止数据的重复加载
     * @param from
     * @param to
    public void switchContent(Fragment from, Fragment to) {
        if (isFragment != to) {
            isFragment = to;
            FragmentManager fm = getSupportFragmentManager();
            //添加渐隐渐现的动画
            FragmentTransaction ft = fm.beginTransaction();
            if (!to.isAdded()) {    // 先判断是否被add过
                ft.hide(from).add(R.id.frame_main, to).commit(); // 隐藏当前的fragment，add下一个到Activity中
            } else {
                ft.hide(from).show(to).commit(); // 隐藏当前的fragment，显示下一个

 最后的结果如下图： 
                    上一篇我们已经把首页的一个基本框架搭起来了，今天我们继续我们的工作，左侧侧滑菜单已经有了，我们就为它加载上相应的页面吧。我们在看知乎的时候，你会发现，首页，发现，关注，收藏，草稿这五项，你在点击之后进入到相应页面之后，侧滑菜单还在，你左侧滑一下，这个侧滑菜单还在，而提问，左滑屏幕，这个页面就没有，有点像返回上一页的感觉。     从操作来看，五页面应该是fragment之间的切换，而提问是单独
				
android studio使用Fragment点击不同按钮切换不同界面
在Android Studio中创建Module，在该module中实现本实例，具体步骤如下：
（1）在新建的module的res/layout目录下面添加布局文件activeity_miana.xml。将局部管理器设置为相对布局管理器（我一开始没有设置为相对布局管理器，然后这个容器就没有设置边界，所以它默认位置（0，0）放置。）并将TextView组件删除，然后在布局管理器中添加一个Fragment组件，并为其设置ID属性，在Fra




    

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas..
				
码了好几年的代码了，被问到Fragment中toolbar添加Menu，让人为之一愣啊，这不是嗖嗖嗖的easy的吗。。。我这么乐于助人的人，被问到问题从来都是直接给完美的代码回复，都起开，我要开始装逼了。。然后呢，结果呢，，，这脸是真打啊，啪啪的，，啊，，，，真疼！！
内容分享一下：
一、如下，，想必这个样子的都搞过了，，，，
 @Override
    public void onCreate(@Nullable Bundle savedInstanceState) {
				
Toolbar作为ActionBar使用介绍
本文介绍了在Android中将Toolbar作为ActionBar使用的方法.
并且介绍了在Fragment和嵌套Fragment中使用Toolbar作为ActionBar使用时需要注意的事项.
使用support library的Toolbar
Android的ActionBar每个版本都会做一些改变, 所以原生的ActionBar在不同的系统上看...
				
我们经常在各类软件中都能看到，点击底部导航栏按钮，能够切换多种界面，并且标题栏也会相对应地改变。在这里我不对fragment做过多的阐述。主要是讲一下在不自定义标题栏的情况下（因为自定义标题栏可能格式，以及按钮等比较复杂），如何做到切换fragment时标题栏中的文字、按钮也相对应地改变。
先放个图。。。
图片太大就先放两张吧。。
具体的代码实现：
首先是在activity_main里面定义标...
先来分析一下:
android4.0之后引入了fragment的概念，它的生命周期函数和activity几乎一样。对菜单的操作也是通过
onCreateOptionMenu（）实现的。
fragment可以通过实现 onCreateOpt
先看效果图。就像上面两幅图片一样，当我们点击下面的导航栏按钮时，APP会切换Fragment，且会更改标题栏和状态栏的颜色。这篇文章主要便是记录该效果的实现过程。
activity的布局如下
&lt;?xml version="1.0" encoding="utf-8"?&gt;
&lt;LinearL...
				
这几天开发遇到ToolBar问题，是给我弄得整天心烦意乱，一直在各大站转圈圈的找问题，设置高度，设置权重，然后 ToolBar还是在顽强的石头一样。一动不动。提前说明，我是半路接手的项目，先上图看看吧。然后再来一张对比图：鲜明的对比出来了可爱的我还想着什么情况，恩，我改改去：
权重（不行）
高度50dp（不行）
android:fitsSystemWindows=”true” 
重点说下3吧。fit
				
在fragment中使用menu，必须在oncreat方法中设置setHasOptionsMenu(true)
重写 onCreateOptionsMenu(Menu menu, MenuInflater inflater)以及
onOptionsItemSelected(MenuItem item)方法
    <div v-for="(comment, index) in comments" :key="index">
        <strong>{{ comment.username }}：</strong>{{ comment.content }}
        <button @click="replyIndex === index ? replyIndex = -1 : replyIndex = index">
        </button>
        <div v-if="replyIndex === index">
          <textarea v-model="newReply"></textarea>
          <button @click="addReply(index)">提交回复</button>
        <div v-for="(reply, replyIndex) in comment.replies" :key="replyIndex">
            <strong>{{ reply.username }}：</strong>{{ reply.content }}
    <h2>发表评论</h2>
      <label>用户名：</label>
      <input type="text" v-model="newComment.username">
      <label>评论内容：</label>
      <textarea v-model="newComment.content"></textarea>
    <button @click="addComment">提交评论</button>
</template>
<script>
export default {
  data() {
    return {
      comments: [
          username: '张三',
          content: '这是第一条评论',
          replies: []
          username: '李四',
          content: '这是第二条评论',
          replies: []
      newComment: {
        username: '',
        content: ''
      newReply: '',
      replyIndex: -1
  methods: {
    addComment() {
      if (this.newComment.username && this.newComment.content) {
        this.comments.push({
          username: this.newComment.username,
          content: this.newComment.content,
          replies: []
        this.newComment = { username: '', content: '' }
    addReply(index) {
      if (this.newReply) {
        this.comments[index].replies.push({
          username: '匿名用户',
          content: this.newReply
        this.newReply = ''
        this.replyIndex = -1
</script>
在这个示例中，我们使用一个 comments 数组来存储所有的评论和回复。每个评论是一个对象，包含一个用户名和评论内容，以及一个 replies 数组，用于存储该评论的所有回复。每个回复也是一个对象，包含一个用户名和回复内容。
在组件中，我们使用 v-for 指令来遍历 comments 数组，并渲染每个评论和回复。为了实现回复功能，我们使用一个 replyIndex 变量来跟踪当前用户正在回复的评论的索引。当用户点击“回复”按钮时，我们将 replyIndex 设置为当前评论的索引，弹出一个文本框供用户输入回复内容。当用户提交回复时，我们将新的回复对象添加到当前评论的 replies 数组中，并将 replyIndex 设置为 -1，以便关闭回复框。
最后，我们还提供了一个“发表评论”区域，让用户输入新的评论。当用户点击“提交评论”按钮时，我们将新的评论对象添加到 comments 数组中，并清空输入框。