Как сделать ModalBottomSheetLayout, чтобы использовать новейшее состояние для sheetContent?

#android #android-jetpack-compose

Вопрос:

Я попытался отобразить метку времени (или любые строки, которые можно обновить в целом) внутри содержимого таблицы ModalBottomSheetLayout, которая отображается при нажатии на плавающую кнопку действия. Однако эта метка времени обновляется только один раз: при первом отображении листа. Если я закрою лист (через OnSave в коде) и открою его снова, метка времени останется прежней, вместо того, чтобы показывать самую новую метку времени. Я думаю, что, возможно, мне как-то не хватает «запомнить» или «Изменчивое состояние», но я не могу заставить его работать.

 class MainActivity : ComponentActivity() {  @ExperimentalMaterialApi  override fun onCreate(savedInstanceState: Bundle?) {  super.onCreate(savedInstanceState)  setContent {  AskQuestionTheme {  val modalBottomSheetState =  rememberModalBottomSheetState(ModalBottomSheetValue.Hidden)  val scope = rememberCoroutineScope()   Scaffold(  floatingActionButton = {  FloatingActionButton(  onClick = { scope.launch { modalBottomSheetState.show() } }) {  Icon(  Icons.Rounded.Add,  contentDescription = "add"  )  }  }) {  ModalBottomSheetLayout(  sheetState = modalBottomSheetState,  sheetContent = {  var t = Date().toString()  MySheet(  str = t,  onSave = {  scope.launch {  modalBottomSheetState.hide()  }  },  onCancel = { scope.launch { modalBottomSheetState.hide() } })  }  ) {  Text("hello")  }  }  }  }  } }  @Composable fun MySheet(str: String, onSave: () -gt; Unit, onCancel: () -gt; Unit) {  Column {  Box(modifier = Modifier.fillMaxWidth()) {  Icon(  Icons.Rounded.Close,  contentDescription = "edit",  modifier = Modifier.align(Alignment.CenterStart).clickable { onCancel() })  Button(onClick = onSave, modifier = Modifier.align(Alignment.CenterEnd)) {  Text("save")  }  }  Text(str)  Spacer(Modifier.height(100.dp))  } }   

Ответ №1:

Для меня есть два пути. Решать вам, какой выбрать)

Первый вариант. Добавлено новое свойство var t by remember { mutableStateOf(Date().toString()) } и измените его перед показом ModalBottomSheetLayout . Это код обновления t = Date().toString() .

 class MainActivity : ComponentActivity() {   @ExperimentalMaterialApi  override fun onCreate(savedInstanceState: Bundle?) {  super.onCreate(savedInstanceState)  setContent {  AskQuestionTheme {  val modalBottomSheetState =  rememberModalBottomSheetState(ModalBottomSheetValue.Hidden)  val scope = rememberCoroutineScope()   var t by remember { mutableStateOf(Date().toString()) }   Scaffold(  floatingActionButton = {  FloatingActionButton(  onClick = {  scope.launch {  t = Date().toString()  modalBottomSheetState.show()  }  }) {  Icon(  Icons.Rounded.Add,  contentDescription = "add"  )  }  }) {  ModalBottomSheetLayout(  sheetState = modalBottomSheetState,  sheetContent = {  MySheet(  str = t,  onSave = {  scope.launch {  modalBottomSheetState.hide()  }  },  onCancel = { scope.launch { modalBottomSheetState.hide() } })  }  ) {  Text("hello")  }  }  }  }  } }  

Второй вариант. Теперь вы можете видеть LaunchedEffect . Код внутри этого блока запускается при modalBottomSheetState.direction изменении этого значения. Внутри этого блока мы обновляем a date .

 class MainActivity : ComponentActivity() {   @ExperimentalMaterialApi  override fun onCreate(savedInstanceState: Bundle?) {  super.onCreate(savedInstanceState)  setContent {  AskQuestionTheme {  val modalBottomSheetState =  rememberModalBottomSheetState(ModalBottomSheetValue.Hidden)  val scope = rememberCoroutineScope()   Scaffold(  floatingActionButton = {  FloatingActionButton(  onClick = { scope.launch { modalBottomSheetState.show() } }) {  Icon(  Icons.Rounded.Add,  contentDescription = "add"  )  }  }) {  ModalBottomSheetLayout(  sheetState = modalBottomSheetState,  sheetContent = {   var t by remember { mutableStateOf(Date().toString()) }    LaunchedEffect(modalBottomSheetState.direction) {  if (modalBottomSheetState.direction == -1f) {  t = Date().toString()  }  }   MySheet(  str = t,  onSave = {  scope.launch {  modalBottomSheetState.hide()  }  },  onCancel = { scope.launch { modalBottomSheetState.hide() } })  }  ) {  Text("hello")  }  }  }  }  } }