回复
『牛角书』鸿蒙开发体验
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>
标签
已于2022-12-16 19:50:43修改
赞
4
收藏 1
回复
相关推荐