『牛角书』鸿蒙开发体验

zut_zyr

发布于 2022-12-13 01:12

浏览

1收藏

简单实现商城购物车功能和UI设计

运行项目进入登录页面，判断正确则进入主页，登录失败则提示

简单的对登录按钮设置监听，点击后获取文本框中内容与客户端所提供内容进行比较，相同则可进入主页面，不同则返回日志信息

package com.example.pratice.slice;

import com.example.pratice.ResourceTable;
import ohos.aafwk.ability.AbilitySlice;
import ohos.aafwk.content.Intent;
import ohos.agp.components.Button;
import ohos.agp.components.Component;
import ohos.agp.components.Text;
import ohos.agp.components.TextField;

import javax.lang.model.SourceVersion;

public class MainAbilitySlice extends AbilitySlice  {
    @Override
    public void onStart(Intent intent) {
        super.onStart(intent);
        super.setUIContent(ResourceTable.Layout_ability_main);
        Text text =(Text) findComponentById(ResourceTable.Id_text_round);
        AbilitySlice slice = this;
        Button button1 = (Button) findComponentById(ResourceTable.Id_enter_button);
        button1.setClickedListener(new Component.ClickedListener() {
            @Override
            public void onClick(Component component) {
                TextField name = (TextField) findComponentById(ResourceTable.Id_name_text_field);
                String name_value = name.getText();
                TextField password = (TextField) findComponentById(ResourceTable.Id_password_text_field);
                String password_value = password.getText();
                System.out.println(password_value);
                System.out.println(name_value);
                //判断是否正确
                if(name_value.equals("1") && password_value.equals("1")){
                    Intent intent1 =new Intent();
                    present(new page1slice() ,intent1);
                }else {
                    Text error_text = (Text) findComponentById(ResourceTable.Id_error_tip_text);
                   error_text.setVisibility(Component.VISIBLE);
                }
                //Intent intent1 =new Intent();
                   present(new page1slice() ,intent1);
            }
        });
    }

    @Override
    public void onActive() {
        super.onActive();
    }

    @Override
    public void onForeground(Intent intent) {
        super.onForeground(intent);
    }
}

『牛角书』鸿蒙开发体验-鸿蒙开发者社区

页面滑动和点击切换实现

实现思路：定义一个TabList ，遍历定义的标签名称数组，构造菜单将标签名称传入TabList进行展示（注意：TabList中的Tab构造器为非静态内部类需要用tablist对象来调用构造器）。自定义TabPageSliderProvider传入所有布局文件的id从而得到所有布局文件并设置进入PageSlider完成PageSlider的初始化，

package com.example.pratice.provider;

import ohos.aafwk.ability.AbilitySlice;
import ohos.agp.components.Component;
import ohos.agp.components.ComponentContainer;
import ohos.agp.components.LayoutScatter;
import ohos.agp.components.PageSliderProvider;

import java.util.List;

public class TabPageSliderProvider extends PageSliderProvider {
    private List<Integer> layoutFileds;   //装载布局文件的id
    private AbilitySlice abilitySlice;    //用于获取布局文件

//构造器
    public TabPageSliderProvider(List<Integer> layoutFileds, AbilitySlice abilitySlice) {
        this.layoutFileds = layoutFileds;
        this.abilitySlice = abilitySlice;
    }

    @Override
    public int getCount() {
        return layoutFileds.size();
    }

    @Override
    public Object createPageInContainer(ComponentContainer componentContainer, int i) {
        Integer id = layoutFileds.get(i);
       Component component = LayoutScatter.getInstance(abilitySlice).parse(id,null,false); //id所对应的布局文件
        componentContainer.addComponent(component);
        return component;
    }

    @Override
    public void destroyPageFromContainer(ComponentContainer componentContainer, int i, Object o) {
      componentContainer.removeComponent((Component) o);
    }

    @Override
    public boolean isPageMatchToObject(Component component, Object o) {
        return true;
    }
}

package com.example.pratice.slice;

import com.example.pratice.ResourceTable;
import com.example.pratice.provider.TabPageSliderProvider;
import ohos.aafwk.ability.AbilitySlice;
import ohos.aafwk.content.Intent;
import ohos.agp.components.Button;
import ohos.agp.components.Component;
import ohos.agp.components.PageSlider;
import ohos.agp.components.TabList;

import java.util.ArrayList;
import java.util.List;

public class page1slice extends AbilitySlice {
    public void onStart(Intent intent) {
        super.onStart(intent);
        super.setUIContent(ResourceTable.Layout_ability_main_page2);
        //初始化Tablist
        TabList tabList = (TabList) findComponentById(ResourceTable.Id_tab_list);
        String[] tabListTags = {"首页","购物车"};
        for (int i =0;i<tabListTags.length;i++){
            TabList.Tab tab =tabList.new Tab(this);
            tab.setText(tabListTags[i]);
            tabList.addTab(tab);
        }

        //初始化pageslider 展示出多项功能选择，初步实现通过滑动切换
        List<Integer> layoutFileds= new ArrayList<>();
        layoutFileds.add(ResourceTable.Layout_ability_main_index);
        layoutFileds.add(ResourceTable.Layout_ability_main_shopcar);
        PageSlider pageSlider = (PageSlider) findComponentById(ResourceTable.Id_page_slider);
        pageSlider.setProvider(new TabPageSliderProvider(layoutFileds,this));

TabList与PageSlider联动可通过点击标签来完成页面跳转操作

获取点击的菜单的索引设置pageSlider的索引与菜单的索引一致，完成点击操作

ps:操作中会出现滑动后页面与菜单内容不一致问题，可通过onPageChosen方法判断菜单和页面代表编号是否一致进行联动

tabList.addTabSelectedListener(new TabList.TabSelectedListener() {
         public void onSelected(TabList.Tab tab) {
            int index = tab.getPosition(); 
            pageSlider.setCurrentPage(index); 
        }
        public void onUnselected(TabList.Tab tab) {
        }
        public void onReselected(TabList.Tab tab) {
        }
        //用于解决屏幕滑动后当前选择点和屏幕显示不一致问题
        public void onPageChosen(int i){
            //参数i就列表当前列表的索引
            if(tabList.getSelectedTabIndex()!= i){
                tabList.selectTabAt(i);
            }
        }
    });

    //默认选中首页，加载pageSlider的第一个页面
    tabList.selectTabAt(0);
    Button btn = (Button) pageSlider.findComponentById(ResourceTable.Id_shopcart_add_button);
    btn.setClickedListener(component -> {

                present(new OrderAddAbilitySlice(),intent);
            }

    );
}
private void  initShopcart(PageSlider pageSlider){
    Button btn = (Button) pageSlider.findComponentById(ResourceTable.Id_shopcart_add_button);
    btn.setClickedListener(component -> {
        Intent intent = new Intent();
        present(new OrderAddAbilitySlice(),intent);
            }

    );
}

}
『牛角书』鸿蒙开发体验-鸿蒙开发者社区

订单结算页即购物车UI设计

<?xml version="1.0" encoding="utf-8"?>
<DependentLayout
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:height="match_parent"
    ohos:width="match_parent"
    ohos:orientation="vertical"
    ohos:padding="5vp">
    
    
    <Text
        ohos:height="match_content"
        ohos:width="match_content"
        ohos:text="我的购物车"
        ohos:text_size="15fp"
        ohos:text_color="#ffffff"
        ohos:layout_alignment="center" />
<!--  滚动布局  -->
    <ScrollView
        ohos:height="match_parent"
        ohos:width="match_parent">
      <TableLayout
        ohos:height="match_content"
        ohos:width="match_parent">

          <DirectionalLayout
              xmlns:ohos="http://schemas.huawei.com/res/ohos"
              ohos:height="80vp"
              ohos:width="match_parent"
              ohos:top_margin="5vp"
              ohos:background_element="#ffffff"
              ohos:orientation="horizontal"
              ohos:alignment="vertical_center">

              <Checkbox

                  ohos:height="25vp"
                  ohos:width="25vp"
                  ohos:text_size="20fp"
                  ohos:check_element="$graphic:checkbox_check_element"/>
              <Image
                  ohos:height="74vp"
                  ohos:width="74vp"
                  ohos:image_src="$media:product1"
                  ohos:margin="3vp"></Image>
              <Text

                  ohos:height="match_content"
                  ohos:width="100vp"
                  ohos:text_size="12fp"
                  ohos:text_alignment="left"
                  ohos:text="华硕天选1-RTX2060-512G 元气蓝"
                  ohos:multiple_lines="true"
                  ohos:padding="5vp"></Text>
              <Text

                  ohos:height="match_content"
                  ohos:width="match_content"
                  ohos:text_size="12fp"
                  ohos:text_alignment="left"
                  ohos:text="￥ 6000"
                  ohos:multiple_lines="true"

                  ohos:padding="5vp"></Text>
              <Text

                  ohos:height="match_content"
                  ohos:width="match_content"
                  ohos:text_size="12fp"
                  ohos:text_alignment="left"
                  ohos:text="2"
                  ohos:multiple_lines="true"
                  ohos:padding="5vp"></Text>
              <Text

                  ohos:height="match_content"
                  ohos:width="match_content"
                  ohos:text_size="12fp"
                  ohos:text_alignment="left"
                  ohos:text="￥ 12000"
                  ohos:multiple_lines="true"
                  ohos:padding="5vp"></Text>

          </DirectionalLayout>


      </TableLayout>
   </ScrollView>
    <Button
        ohos:id="$+id:shopcart_add_button"
        ohos:align_parent_bottom="true"
        ohos:height="match_content"
        ohos:width="match_parent"
        ohos:text="添加购物车"
        ohos:text_color="#ffffff"
        ohos:text_size="13fp"
        ohos:padding="10vp"
        ohos:background_element="#ff383b"
        ohos:bottom_margin="45vp"
        ></Button>
</DependentLayout>


      </TableLayout>
   </ScrollView>
    <Button
        ohos:id="$+id:shopcart_add_button"
        ohos:align_parent_bottom="true"
        ohos:height="match_content"
        ohos:width="match_parent"
        ohos:text="添加购物车"
        ohos:text_color="#ffffff"
        ohos:text_size="13fp"
        ohos:padding="10vp"
        ohos:background_element="#ff383b"
        ohos:bottom_margin="45vp"
        ></Button>
</DirectionalLayout>

『牛角书』鸿蒙开发体验-鸿蒙开发者社区

通过事件监听器实现点击结算跳转至结算页面

设置监听，点击事件发生则跳转至结算页面

private void  initShopcart(PageSlider pageSlider){
    Button btn = (Button) pageSlider.findComponentById(ResourceTable.Id_shopcart_add_button);
    btn.setClickedListener(component -> {
        Intent intent = new Intent();
                present(new OrderAddAbilitySlice(),intent);
            }
            
    );
}

RadioContainer和RadioButton组合实现支付方式单选

<DirectionalLayout
    ohos:height="match_content"
    ohos:width="match_parent"
    ohos:padding="20vp"
    ohos:top_margin="5vp">
    <RadioContainer
        ohos:height="match_content"
        ohos:width="match_parent"
        ohos:orientation="horizontal">
    <RadioButton
    ohos:height="35vp"
    ohos:width="match_content"
    ohos:text="微信"
    ohos:text_size="15fp"></RadioButton>
    <RadioButton
        ohos:height="35vp"
        ohos:width="match_content"
        ohos:text="支付宝"
        ohos:text_size="15fp"></RadioButton>
    <RadioButton
        ohos:height="35vp"
        ohos:width="match_content"
        ohos:text="银联"
        ohos:text_size="15fp"></RadioButton>

    </RadioContainer>
</DirectionalLayout>

『牛角书』鸿蒙开发体验-鸿蒙开发者社区