flutter

Question

我学习 flutter 有一段时间了，但我遇到了一个不知道如何解决的问题。我正在尝试使用从父级传递的数据创建一个下拉按钮，数据是一个单词列表，例如 ['work'、'hobby'、'social'] 等

我的问题是更改值后的下拉按钮仍然显示初始按钮我认为问题出在我初始化“dropdownValue”的地方，因为我在构建方法中执行此操作但我无法访问属性在那个小部件之外。

class TaskSheet extends StatefulWidget {
  @override
  _TaskSheetState createState() => _TaskSheetState();
  final List categories;
  TaskSheet(this.categories);
**// HERE I RECIVE THE LIST** 
}

class _TaskSheetState extends State<TaskSheet> {
  String dropdownValue;
  // I CANT ASSIGN VALUE HERE BECAUSE USING widget.categories  DONT WORK HERE AND IT MUST BE INSIDE BUILD METHOD
  @override
  Widget build(BuildContext context) {
    var categoriesList = widget.categories
        .map(
          (category) => DropdownMenuItem(
            value: category.title,
            child: Text(category.title),
          ),
        )
        .toList();
    dropdownValue = categoriesList[0].value; // THIS VALUE ALWAYS STAY THE SAME 

    return BottomSheet(
      builder: (context) => Container(
        width: double.infinity,
        padding: EdgeInsets.symmetric(horizontal: 30.0, vertical: 16),
        child: Column(
          children: [
            Text('Add new task'),
            TextField(
              decoration: InputDecoration(labelText: 'What you wanna do?'),
            ),
            DropdownButton(
              icon: Icon(Icons.keyboard_arrow_down),
              focusColor: Theme.of(context).primaryColor,
              value: dropdownValue,
              onChanged: (newValue) {
                setState(() {
                  dropdownValue = newValue; // THIS HAVE NO IMPACT ON INITAL VALUE
                });
              },
              items: categoriesList,
            ),
          ],
        ),
      ),
      onClosing: () {},
    );
  }
}

我想如果我找到一种方法来访问 widget.props 从构建方法的外部它会工作，但我不知道如何做到这一点

Answer 1

您可以复制粘贴运行下面的完整代码
您可以在下面看到工作演示
第 1 步：Category extends Equatable

import 'package:equatable/equatable.dart';

class Category extends Equatable {
  String title;
  Category({this.title});

  @override
  List<Object> get props => [title];
}

第 2 步：dropdownValue 是 Category 而不是 String 并使用 initState()

  Category dropdownValue;

  @override
  void initState() {
    dropdownValue = widget.categories[0];
    super.initState();
  }

第 3 步：value 是 category

DropdownMenuItem<Category>(
            value: category,

工作演示

完整代码

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

class Category extends Equatable {
  String title;
  Category({this.title});

  @override
  List<Object> get props => [title];
}

class TaskSheet extends StatefulWidget {
  @override
  _TaskSheetState createState() => _TaskSheetState();
  final List<Category> categories;
  TaskSheet(this.categories);
}

class _TaskSheetState extends State<TaskSheet> {
  Category dropdownValue;

  @override
  void initState() {
    dropdownValue = widget.categories[0];
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    var categoriesList = widget.categories
        .map(
          (category) => DropdownMenuItem<Category>(
            value: category,
            child: Text(category.title),
          ),
        )
        .toList();

    return BottomSheet(
      builder: (context) => Container(
        width: double.infinity,
        padding: EdgeInsets.symmetric(horizontal: 30.0, vertical: 16),
        child: Column(
          children: [
            Text('Add new task'),
            TextField(
              decoration: InputDecoration(labelText: 'What you wanna do?'),
            ),
            DropdownButton<Category>(
              icon: Icon(Icons.keyboard_arrow_down),
              focusColor: Theme.of(context).primaryColor,
              value: dropdownValue,
              onChanged: (newValue) {
                setState(() {
                  dropdownValue =
                      newValue; // THIS HAVE NO IMPACT ON INITAL VALUE
                });
                print(dropdownValue.title);
              },
              items: categoriesList,
            ),
          ],
        ),
      ),
      onClosing: () {},
    );
  }
}

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            TaskSheet([
              Category(title: "work"),
              Category(title: "hobby"),
              Category(title: "social")
            ]),
          ],
        ),
      ),
    );
  }
}

flutter - 使用道具中的数据创建下拉按钮

flutter - creating dropdown button with data from props

mobile

dart

flutter-provider