JetpackCompose学习记录

package com.candy.ui_test

import android.R.attr.text
import android.R.attr.top
import androidx.compose.foundation.Image
import androidx.compose.foundation.border
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.fillMaxHeight
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.rememberScrollState
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.foundation.verticalScroll
import androidx.compose.material3.Button
import androidx.compose.material3.Card
import androidx.compose.material3.CardDefaults
import androidx.compose.material3.ElevatedButton
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.layout.ContentScale
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp

@Composable
fun ProfilePage()
{
    Card( //卡片
       elevation = CardDefaults.cardElevation(defaultElevation = 8.dp), // 正确的写法 (适用于 Material 3)
       // elevation = 8.dp, // 在 Material 2 中这是可以的
       modifier = Modifier.height(600.dp) //设置卡片高度
          // .fillMaxSize()
          .padding(top = 150.dp, bottom = 50.dp, start = 16.dp, end = 16.dp)
    )
    {
       Column( //一种列表布局
          modifier = Modifier.fillMaxHeight()//先添加该属性，填满整个高度
             .verticalScroll(rememberScrollState()), //列表垂直滚动 参数为记住列表滚动状态
          horizontalAlignment = Alignment.CenterHorizontally, //列表水平居中
          verticalArrangement = Arrangement.Center, //列表垂直居中 填满后生效
       )
       {
          Image(
             painter = painterResource(id = R.drawable.photo), //图片的画家，即为图片路径
             contentDescription = "Candy", //图片的描述
             modifier = Modifier.size(125.dp) //图片的尺寸
                // .clip(CircleShape) //图片的纯圆修饰符
                .clip(RoundedCornerShape(15)) //图片的圆角形状 单位int 50为纯圆
                .border(
                   width = 1.dp, //图片的边框宽度
                   color = Color.White, //图片的边框颜色
                   shape = RoundedCornerShape(15) //图片的边框形状
                ), //图片的边框
             contentScale = ContentScale.Crop //图片的裁剪方式
          )

          Text(
             text = "Candy",
             fontWeight = FontWeight.Bold, //字体加粗
             fontSize = 30.sp, //字体大小
          )
          Text(
             text = "@Candquarzy\uD83C\uDFF3\uFE0F\u200D⚧\uFE0F",
             fontSize = 12.sp, //设置字体大小
          )

          Row(
             horizontalArrangement = Arrangement.SpaceEvenly, //列表水平均匀排列
             modifier = Modifier.fillMaxWidth() //填满整个宽度
                .padding(16.dp) //添加外边距
          )
          {
             ProfileData("5.28k", "粉丝") //调用函数
             ProfileData("114", "关注") //调用函数
             ProfileData("87", "动态") //调用函数
          }

          Row(
             horizontalArrangement = Arrangement.SpaceEvenly, //列表水平均匀排列
             modifier = Modifier.fillMaxWidth() //填满整个宽度
//           .padding(16.dp) //添加外边距
          )
          {
             ElevatedButton(
                onClick = {
                   /* TODO */
                })
             {
                Text(
                   text = "关注",
                )
             }

             ElevatedButton(
                onClick = {
                   /* TODO */
                })
             {
                Text("私信")
             }
          }
       }
    }
}

@Composable
fun ProfileData(count: String, text: String) //函数 用于存储数据列表
{
    Column(
       horizontalAlignment = Alignment.CenterHorizontally, //列表水平居中
    )
    {
       Text(
          text = count,
          fontWeight = FontWeight.SemiBold, //字体加粗
       )
       Text(
          text = text,
       )
    }
}

@Preview(showBackground = true) //预览注解 + 显示背景
@Composable
fun ProfilePagePreview()
{
    ProfilePage()
}

import androidx.compose.foundation.layout.Column

import androidx.compose.foundation.layout.Row

import androidx.compose.material3.Card

import androidx.constraintlayout.compose.ConstraintLayout

implementation ("androidx.constraintlayout:constraintlayout-compose:1.1.1")

import androidx.constraintlayout.compose.Dimension

import androidx.compose.foundation.layout.BoxWithConstraints

import androidx.compose.material3.Scaffold

@Composable
fun ScaffoldExample() {
    var presses by remember { mutableIntStateOf(0) }

    Scaffold(
        topBar = {
            TopAppBar(
                colors = topAppBarColors(
                    containerColor = MaterialTheme.colorScheme.primaryContainer,
                    titleContentColor = MaterialTheme.colorScheme.primary,
                ),
                title = {
                    Text("Top app bar")
                }
            )
        },
        bottomBar = {
            BottomAppBar(
                containerColor = MaterialTheme.colorScheme.primaryContainer,
                contentColor = MaterialTheme.colorScheme.primary,
            ) {
                Text(
                    modifier = Modifier
                        .fillMaxWidth(),
                    textAlign = TextAlign.Center,
                    text = "Bottom app bar",
                )
            }
        },
        floatingActionButton = {
            FloatingActionButton(onClick = { presses++ }) {
                Icon(Icons.Default.Add, contentDescription = "Add")
            }
        }
    ) { innerPadding ->
        Column(
            modifier = Modifier
                .padding(innerPadding),
            verticalArrangement = Arrangement.spacedBy(16.dp),
        ) {
            Text(
                modifier = Modifier.padding(8.dp),
                text =
                """
                    This is an example of a scaffold. It uses the Scaffold composable's parameters to create a screen with a simple top app bar, bottom app bar, and floating action button.

                    It also contains some basic inner content, such as this text.

                    You have pressed the floating action button $presses times.
                """.trimIndent(),
            )
        }
    }
}

import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.LazyRow

val itemsList = (0..5).toList()
val itemsIndexedList = listOf("A", "B", "C")

@Composable
LazyColum(

)
{
    items(itemsList){
        Text(
            text = "Item is ${it}",
        )
    }
}

import androidx.compose.foundation.layout.Box

import androidx.compose.material3.Text

import androidx.compose.foundation.Image

import androidx.compose.material3.TextField

var name_state by remember {
   mutableStateOf("") 
    //使用remember和mutableStateOf创建一个可变状态变量
}

var name: String by rememberSaveable {
    //使用rememberSaveable可以在页面旋转时保存数据
   mutableStateOf("") 
    //使用remember和mutableStateOf创建一个可变状态变量
   //只有这样在变化时才会进行页面重组
}

Column(
   horizontalAlignment = Alignment.CenterHorizontally, //水平对齐居中
   verticalArrangement = Arrangement.Center, //垂直对齐居中
   modifier = Modifier.fillMaxSize(), //填充满屏幕
) {
   Text("Hello $name"); //文本组件 将name的值复制给文本
   //当name的值改变时，文本会自动更新(刷新界面)
   Spacer(modifier = Modifier.height(20.dp)) //间隔组件，设置高度为20dp

   TextField(
      //文本输入框
      value = name_state,
      //原本文本框是无状态的，
      // 然后使用remember和mutableStateOf创建了一个
      // 可变状态变量name_state 并分配给它
      onValueChange = {
         //当输入框的值改变时调用
         name_state = it //更新状态
      },
      label = {
         Text("请输入:")
      }
   )
   Button(
      onClick = {
         name = name_state //点击按钮时将输入框的值赋给name
      }
   )
   {
      Text(text = "显示")
   }

import androidx.compose.foundation.layout.Spacer

import androidx.compose.material3.Icon
import androidx.compose.material.icons.Icons //导入谷歌的图标类

import androidx.compose.material3.NavigationBar

import androidx.compose.material3.NavigationBarItem

NavigationBar(
)
{
    items.forEach {
        item ->
        NavigationBarItem(
          	selected = false,
          	onClick = {
                
            },
            icon = {
                Icon( )
            },
            label = {
                Text( )
            }
        )
    }
}

import androidx.compose.material3.IconButton

IconButton(
    onClick = {
        //点击事件
    }
)
{
    Icon(
        //图标设置
    )
    Text(
         //显示文本设置
    )
}

import androidx.compose.ui.window.Dialog

import androidx.compose.ui.window.DialogProperties //使用DialogProperties需要导入

import androidx.compose.material3.AlertDialog

@Composable
fun AlertDialogExample(
    onDismissRequest: () -> Unit,
    onConfirmation: () -> Unit,
    dialogTitle: String,
    dialogText: String,
    icon: ImageVector,
) {
    AlertDialog(
        icon = {
            Icon(icon, contentDescription = "Example Icon")
        },
        title = {
            Text(text = dialogTitle)
        },
        text = {
            Text(text = dialogText)
        },
        onDismissRequest = {
            onDismissRequest()
        },
        confirmButton = {
            TextButton(
                onClick = {
                    onConfirmation()
                }
            ) {
                Text("Confirm")
            }
        },
        dismissButton = {
            TextButton(
                onClick = {
                    onDismissRequest()
                }
            ) {
                Text("Dismiss")
            }
        }
    )
}

import androidx.compose.material3.Chip
import androidx.compose.material3.ChipDefaults

var select by remember { mutableStateOf(false) }

FilterChip(
    onClick = {
        select = !select
    },
    label = {
        Text(
            text = "about"
        )
    },
    selected = select,
    leadingIcon = {
        if (select)
        {
            {
                Icon(
                    /* ICON */
                )
            }
        }
        else
        {
            null
        },
    }
)

var menuExpanded by remember { mutableStateOf(false) }

IconButton(
    onClick = {
        menuExpanded = true
    }
)
{
    Icon(
        /* ICON */
    )
}
DropdownMenu(
    expanded = menuExpanded,
    onDismissRequest = {
        menuExpanded = false
    }
)
{
    DropdownMenuItem(
        onClick = {
            /* TODO */
        },
        text = {
            Text(
                text = "关于"
            )
        },
        leadingIcon = {
            Icon(
                /* ICON */
            )
        }
    )
}

import androidx.compose.runtime.getValue
import androidx.compose.runtime.setValue
import androidx.compose.runtime.remember

var name_state by remember {
    mutableStateOf("") //使用remember和mutableStateOf创建一个可变状态变量
}

Text("Hello $name_state")
// 假设我们要设定让用户输入的内容更改到该Text上:
OutlinedTextField( //文本输入框
    value = name_state,s
    //原本文本框是无状态的，
    // 然后我们使用remember和mutableStateOf创建了一个
    // 可变状态变量name_state 并分配给它
    onValueChange = {
       //当输入框的值改变时调用
       name_state = it //更新状态
    },
    label = {
       Text("请输入:")
    } //标签文本
)