『牛角书』鸿蒙开发体验

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);
    }
}
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
  • 28.
  • 29.
  • 30.
  • 31.
  • 32.
  • 33.
  • 34.
  • 35.
  • 36.
  • 37.
  • 38.
  • 39.
  • 40.
  • 41.
  • 42.
  • 43.
  • 44.
  • 45.
  • 46.
  • 47.
  • 48.
  • 49.
  • 50.
  • 51.
  • 52.
  • 53.

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

页面滑动和点击切换实现

实现思路:定义一个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;
    }
}
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
  • 28.
  • 29.
  • 30.
  • 31.
  • 32.
  • 33.
  • 34.
  • 35.
  • 36.
  • 37.
  • 38.
  • 39.
  • 40.
  • 41.
  • 42.
  • 43.
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));

       
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
  • 28.
  • 29.
  • 30.
  • 31.
  • 32.
  • 33.
  • 34.
  • 35.

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);
            }

    );
}
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
  • 28.
  • 29.
  • 30.
  • 31.
  • 32.
  • 33.
  • 34.
  • 35.
  • 36.
  • 37.

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

订单结算页即购物车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>
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
  • 28.
  • 29.
  • 30.
  • 31.
  • 32.
  • 33.
  • 34.
  • 35.
  • 36.
  • 37.
  • 38.
  • 39.
  • 40.
  • 41.
  • 42.
  • 43.
  • 44.
  • 45.
  • 46.
  • 47.
  • 48.
  • 49.
  • 50.
  • 51.
  • 52.
  • 53.
  • 54.
  • 55.
  • 56.
  • 57.
  • 58.
  • 59.
  • 60.
  • 61.
  • 62.
  • 63.
  • 64.
  • 65.
  • 66.
  • 67.
  • 68.
  • 69.
  • 70.
  • 71.
  • 72.
  • 73.
  • 74.
  • 75.
  • 76.
  • 77.
  • 78.
  • 79.
  • 80.
  • 81.
  • 82.
  • 83.
  • 84.
  • 85.
  • 86.
  • 87.
  • 88.
  • 89.
  • 90.
  • 91.
  • 92.
  • 93.
  • 94.
  • 95.
  • 96.
  • 97.
  • 98.
  • 99.
  • 100.
  • 101.
  • 102.
  • 103.
  • 104.
  • 105.
  • 106.
  • 107.
  • 108.
  • 109.
  • 110.
  • 111.
  • 112.
  • 113.
  • 114.
  • 115.
  • 116.
  • 117.

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

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

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

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);
            }
            
    );
}
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.

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>
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.

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

标签
已于2022-12-16 19:50:43修改
4
收藏 1
回复
举报
4
1
回复
    相关推荐