Как обновить состояние ModalBottomSheet в Flutter?

Question

Этот код очень прост: показывает модальный нижний лист, а когда пользователь нажимает кнопку, он увеличивает высоту листа на 10.

Но ничего не происходит.На самом деле, он обновляет свой размер только в том случае, если пользователь «скользит» по нижнему листу пальцем (я полагаю, что смахивание вызывает внутренний setState на листе).

Мой вопрос: как вызвать состояние обновленияModalBottomSheet?

showModalBottomSheet(
    context: context,
    builder: (context) {
      return Container(
        height: heightOfModalBottomSheet,
        child: RaisedButton(

            onPressed: () {
              setState(() {
                heightOfModalBottomSheet += 10;
              });

            }),
      );
    });

Answer 1

Вы можете использовать showBottomSheet из ScaffoldState.Подробнее здесь об этом шоуBottomSheet.

Это покажет bottomSheet и вернет контроллер PersistentBottomSheetController.с этим контроллером вы можете вызвать controller.SetState((){}), который переопределяет bottomSheet.

Вот пример

PersistentBottomSheetController _controller; // <------ Instance variable
final _scaffoldKey = GlobalKey<ScaffoldState>(); // <---- Another instance variable
.
.
.
void _incrementBottomSheet(){
    _controller.setState(
        (){
            heightOfModalBottomSheet += 10;
        }
    )
}
.
void _createBottomSheet() async{
  _controller = await _scaffoldKey.currentState.showBottomSheet(
        context: context,
        builder: (context) {
           return Container(
               height: heightOfModalBottomSheet,
               child: RaisedButton(
               onPressed: () {
                  _incrementBottomSheet()
              }),
         );
      });
}

Answer 2

Вы можете использовать Flutter StatefulBuilder, чтобы обернуть ваш ModalBottomSheet следующим образом:

showModalBottomSheet(
    context: context,
    builder: (context) {
      return StatefulBuilder(
          builder: (BuildContext context, StateSetter setState /*You can rename this!*/) {
        return Container(
          height: heightOfModalBottomSheet,
          child: RaisedButton(onPressed: () {
            setState(() {
              heightOfModalBottomSheet += 10;
            });
          }),
        );
      });
});

Обратите внимание, что новый setState переопределит ваш основной виджет setState, но вы можете просто переименовать его такВы сможете установить состояние вашего родительского виджета и модального

//This sets modal state
setModalState(() {
    heightOfModalBottomSheet += 10;
});
//This sets parent widget state
setState(() {
     heightOfModalBottomSheet += 10;
});

Answer 3

Пожалуйста, обратитесь к рабочему коду ниже.Я создал новый виджет Stateful (ModalBottomSheet) для showModalBottomSheet.При нажатии кнопки мы восстанавливаем ModalBottomSheet только , что теперь намного чище.Мы можем использовать AnimationController, если нужна анимация для изменения высоты.

import 'dart:async';
import 'package:flutter/material.dart';

class ModalBottomSheet extends StatefulWidget {
  _ModalBottomSheetState createState() => _ModalBottomSheetState();
}

class _ModalBottomSheetState extends State<ModalBottomSheet>
    with SingleTickerProviderStateMixin {
  var heightOfModalBottomSheet = 100.0;

  Widget build(BuildContext context) {
    return Container(
      height: heightOfModalBottomSheet,
      child: RaisedButton(
          child: Text("Press"),
          onPressed: () {
            heightOfModalBottomSheet += 100;
            setState(() {});
          }),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return new _MyHomePageState();
  }
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    Future(() => showModalBottomSheet(
        context: context,
        builder: (context) {
          return ModalBottomSheet();
        }));
    return new Scaffold(
      appBar: new AppBar(
        title: new Text("Modal example"),
      ),
    );
  }
}

void main() {
  runApp(new MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(title: 'Flutter Demo', home: new MyHomePage());
  }
}