Блог

Главная - Вопросы по программированию - Как я могу изменить дочерний элемент контейнера с помощью Dart-кода?

Как я могу изменить дочерний элемент контейнера с помощью Dart-кода?

#flutter #dart

#flutter #dart

Вопрос:

Я хотел бы динамически устанавливать дочерний виджет определенного контейнера с помощью кода Dart, в частности, при нажатии кнопки. С чего мне начать, чтобы выполнить это? Я уже исследовал использование просмотра страницы, но это не совсем то, что я ищу.

Если бы я занимался веб-разработкой, я бы легко мог редактировать элемент по его идентификатору. Существует ли эквивалент Flutter идентификаторов HTML? Контроллеры кажутся здесь ограничивающими.

Ответ №1:

Flutter на самом деле так не работает. Flutter, как и React, является декларативной средой, в отличие от императивной среды. Деревья виджетов строятся из состояния, и поэтому виджет, расположенный выше в дереве, не знает и даже не заботится о своих дочерних элементах.

https://flutter.dev/docs/get-started/flutter-for/declarative

https://flutter.dev/docs/get-started/flutter-for/web-devs

Комментарии:

1. Спасибо, это кое-что проясняет. В таком случае — каковы мои варианты с точки зрения достижения чего-то подобного? Это должно быть возможно, потому что я определенно видел и использовал приложения, у которых есть постоянная панель навигации.

2. Вам нужно спланировать, где находится ваше состояние в иерархии. Вы можете «детализировать» состояние в дереве, передав его дочерним элементам, или вы можете «добраться» до состояния с помощью BuildContext using InheritedWidget s и множества других удобных инструментов, таких как Provider . Попробуйте выполнить этот пример. flutter.dev/docs/development/data-and-backend/state-mgmt/simple

Ответ №2:

Попробуйте это

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

class _MyHomePageState extends State<MyHomePage> {
  Widget _dynamicWidget = FlutterLogo();
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            _dynamicWidget,
            FlatButton(
                onPressed: () {
                  setState(() {
                    _dynamicWidget = Container(
                      color: Colors.red,
                      width: 50,
                      height: 50,
                    );
                  });
                },
                child: Text('Change')),
          ],
        ),
      ),
    );
  }
}