创建Screents和ViewModels

在前面的章节中，我们已经分析了OrderNow项目的理论概念和我们将赋予的组织。

在本章中，我们将开始实现初始结构和模板，这将联接每一个应用程序的部分。

首先将添加以下带有各自视图模型的主屏幕：

• 首页

• 产品列表

• 产品详情

• 购物车

添加元素的一个例子如下图所示：

Sreens 和 ViewModels

 我们将在应用程序中使用依赖管理器将每个ViewModel绑定到各自的屏幕上。为此，我们必须首先在应用程序中依赖Hilt。

implementation 'com.google.dagger:hilt-android:2.38.1' // Use the latest version
kapt 'com.google.dagger:hilt-android-compiler:2.38.1' // Use the latest version

在依赖Hilt的过程后，将要求定义应用类型类，例如在我们的示例项目中，将定义为OrderNowApplication，如下：

@HiltAndroidApp
class OrderNowApplication:Application() {
}

注意：在androidmanifest .xml中注册OrderNowApplication类

<application

android:name=".main.OrderNowApplication"

android:allowBackup="true"

...>

此外，我们将 Navigation Compose依赖到项目中，这将允许View(Composable)在导航期间获得其各自ViewModel的实例:

dependencies {

       implementation 'androidx.hilt:hilt-navigation-compose:1.0.0'

}

一旦在项目中正确地执行了前面的配置，我们就可以像这样将ViewModel注入View:

 Home ViewModel:

@HiltViewModel

class HomeViewModel @Inject constructor() : ViewModel() {

...

}

Home Screen:

@Composable

fun HomeScreen(viewModel: HomeViewModel = hiltViewModel()

) {

...

}

每个屏幕都将通过Hilt依赖管理器与其相应的ViewModel相关联。到目前为止，我们已经集成了以下架构组件:Compose、Navigation和ViewModel。

这是Jetpack工具的完美组合，在后面的章节中，我们将看到它在移动开发中的潜力。

UI模式：TopAppBar和BottomAppBar

通过Scaffold组件，我们可以在应用程序中实现两种在Material Design中最常见的UI模式：TopAppBar和BottomAppBar。

Scaffold是一个详细的视图（composable），它将允许我们以以下方式实现这些模式：

Scaffold:

Scaffold(

        topBar = {

                   TopAppBar { /* Top app bar content */ }

        },

        bottomBar = {

        BottomAppBar { /* Bottom app bar content */ }

        }

) { contentPadding -> 9 // Screen content

}

在代码片段中，我们定义了topBar，bottomBar，和（还未添加的）屏幕内容。

在Scaffold中，topBar和bottomBar部分是可选的；也就是说，可以省略其中一部分的定义。此外，在Scaffold中，我们可以声明两个更多的组件：

• scaffoldState

• snackbarHost

在下一章，我们将看到每个的用法。现在我们只定义topBar和bottomBar。 现在我们知道如何在我们的应用程序中包含这些UI模式，下一步就是创建代表TopAppBar和BottomAppBar的视图（Composables）。

我们将其组织在一个叫做patterns的目录中，并在其中添加了两个Views，OrderNowTopBar和OrderNowBottomBar，如下所示：

TopAppBar and BottomAppBar Composables:

 OrderNowTopBar

OrderNowTopBar的实现很简单。我们最初只需要以以下方式实现它:

@Composable

fun OrderNowTopBar() {

        TopAppBar(

                title = {

                Text(

                        text = stringResource(id = AppString.app_name),

                        textAlign = TextAlign.Center,

                        modifier = Modifier.fillMaxWidth()

                )

        },

        backgroundColor = MaterialTheme.colors.background,

        contentColor = contentColorFor(MaterialTheme.colors.background)

        )

}

之前的实现还不包含返回选项等元素;然而，在后面的章节中添加“Back”到TopAppBar中，它将包含这样一个使用状态策略的导航选项。

OrderNowBottomBar

OrderNowBottomBar的实现可以更精细一些，因为我们需要包括屏幕之间的导航。但是，我们将把实现细节留到下一章。

现在，我们将包含一个没有导航的静态定义。

@Composable
fun OrderNowBottomBar() {
    val selectedIndex = remember { mutableStateOf(0) }
    BottomNavigation(
        backgroundColor = MaterialTheme.colors.background,
        contentColor = contentColorFor(MaterialTheme.colors.background),
        elevation = 10.dp
    ) {
        BottomNavigationItem(icon = {
            Icon(imageVector = Icons.Default.Home, "")
        },
            label = { Text(text = "Home") },
            selected = (selectedIndex.value == 0),
            unselectedContentColor = Color.Gray,
            selectedContentColor = orange,
            onClick = {
                selectedIndex.value = 0
            })

        BottomNavigationItem(icon = {
            Icon(imageVector = Icons.Default.ShoppingCart, "")
        },
            label = { Text(text = "Cart") },
            selected = (selectedIndex.value == 1),
            unselectedContentColor = Color.Gray,
            selectedContentColor = orange,
            onClick = {
                selectedIndex.value = 1
            })
    }
}

在这个阶段，我们已经有了屏幕、视图模型和Scaffold的定义（其中包括OrderNowBottomBar和OrderNowTopBar）。

下一步是将所有的部分组合在一起，我们将在下一部分中做这个。

将所有元素整合在一起

第一项任务是创建一个名为main的目录。这个目录将是横向的，并将包含App的基类或结构。

在该目录中，我们放置Application类，移动MainActivity到那里，以及应用程序的主屏幕，我们将其命名为OrderNowScreen，如下图所示。

Main Components： 

现在我们修改MainActivity.kt类，以便它将登录屏幕加载到OrderNowScreen应用程序，如下所示:

@AndroidEntryPoint
class MainActivity : ComponentActivity() {
	override fun onCreate(savedInstanceState: Bundle?) {
	super.onCreate(savedInstanceState)
	    setContent {
	        OrderNowScreen()
	    }
	}
}

然后，在OrderNowScreen视图中，我们像这样定义应用程序的Scaffold:

@Composable
fun OrderNowScreen() {
    InitialSkeletonTheme {
        Surface(
            modifier = Modifier.fillMaxSize(),
            color = MaterialTheme.colors.background
        ) {
            Scaffold(
                topBar = { OrderNowTopBar() },
                bottomBar = { OrderNowBottomBar() }
            ) { contentPadding ->
                println(contentPadding)
            }
        }
    }
}

当您运行应用程序时，结果应该类似于以下图像:

总结

在本章中，我们已经构建了OrderNow项目的初始结构。

这里定义和实现的组件将是下一章继续讨论导航的基础。

随着我们阅读这些章节，我们将改进OrderNow的每个部分的实现，因此.我们的电子贸易将以最佳方式设计和实施。

源码：

class MainActivity4: ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent{
            OrderNowScreen()
        }
    }
}
@Preview
@Composable
fun OrderNowScreen() {
    MyTestTheme {
        Surface(modifier = Modifier.fillMaxSize(),color=MaterialTheme.colors.background){
            Scaffold(
                topBar = {OrderNowTopBar()},
                bottomBar={ OrderNowBottomBar()}
            ) {contentPadding ->
                println(contentPadding)
            }
        }
    }
}



@Preview
@Composable
fun OrderNowBottomBar(){
    val selectedIndex =remember{ mutableStateOf(0)}
    BottomNavigation(
        backgroundColor = MaterialTheme.colors.background,
        contentColor=contentColorFor(MaterialTheme.colors.background),
        elevation = 10.dp){

        BottomNavigationItem(
                icon = { Icon(imageVector = Icons.Default.Home,"") },
                label = { Text(text = "首页")},
                selected =(selectedIndex.value == 0) ,
                unselectedContentColor = Color.Gray,
                selectedContentColor = Color.Red,
                onClick = { selectedIndex.value = 0 })
        BottomNavigationItem(icon={Icon(imageVector = Icons.Default.Favorite,"")},
        label = {Text(text="热门")},
        selected = (selectedIndex.value== 1),
            unselectedContentColor =Color.Gray,
            selectedContentColor = Color.Red,
            onClick ={selectedIndex.value=1}
            )
        BottomNavigationItem(
            icon = { Icon(imageVector = Icons.Default.ShoppingCart,"") },
            label = { Text(text = "购物车")},
            selected =(selectedIndex.value == 2) ,
            unselectedContentColor = Color.Gray,
            selectedContentColor = Color.Red,
            onClick = { selectedIndex.value = 2 })
        BottomNavigationItem(icon={Icon(imageVector = Icons.Default.Person,"")},
            label = {Text(text="我的")},
            selected = (selectedIndex.value== 3),
            unselectedContentColor =Color.Gray,
            selectedContentColor = Color.Red,
            onClick ={selectedIndex.value=3}
        )
    }
}


@Composable
fun OrderNowTopBar() {
    TopAppBar(
        title = {
            Text(
                text = stringResource(id = R.string.app_name),
                textAlign = TextAlign.Center,
                modifier = Modifier.fillMaxWidth()
            )
        },
        backgroundColor = MaterialTheme.colors.background,
        contentColor = contentColorFor(MaterialTheme.colors.background)
    )
}





@HiltAndroidApp
class OrderNowApplication : Application() {
}