Question

我想在下拉列表上点击以更改背景图像，我将在BG 1上点击并更改图像，我如何访问下拉列表中的单个元素？这是我的代码，我该怎么做？

    new Column( children: <Widget>[
            new Padding(
                padding: new EdgeInsets.fromLTRB(100.0, 350.0, 100.0, 50.0)),
            new DropdownButton<String>(
              onChanged: (String value) {
                setState(() {
                  return new Container(
            padding: const EdgeInsets.fromLTRB(100.0, 10.0, 100.0, 00.0),
            decoration: BoxDecoration(
              image: DecorationImage(
                image: new AssetImage('asset/bg.png'),
                alignment: Alignment.topRight,
              ),
            ),
          );
                });
              },
              hint: new Text('Select Type'),
              value: selectedValues,
              items: <String>[
                "BG 1",
                "BG 2",
              ].map((String value) {
                return new DropdownMenuItem<String>(
                  value: value,
                  child: new Text(value),
                );
              }).toList(),
            ),

          ],),
        ImageRotate(),
      ]),
    );
  }
}

Answer 1

您可以创建一个变量，该变量保存DropdownButton所选项目的值，并创建AssetImage列表。我希望以下示例可以使您的想法清晰。

import 'package:flutter/material.dart';

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

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

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {

  List<String> _locations = ['A', 'B'];
  int imageindex = 0;
  String _selcted = 'A';
  List<ImageProvider> bg = [ AssetImage("images/p1.png"), AssetImage("images/p2.jpg")];

  @override
  Widget build(BuildContext context) {

    return Scaffold(
      appBar: new AppBar(
        title: new Text("cds"),
      ),
      body:  Container(
        height: double.infinity,
        width: double.infinity,
        decoration: BoxDecoration(
          image: DecorationImage(image: bg[imageindex])
        ),
        child: Center(
          child:new DropdownButton<String>(
            items: _locations.map((String value) {
              return new DropdownMenuItem<String>(
                value: value,
                child: new Text(value),
              );
            }).toList(),
            hint: new Text("csdc"),
            value: _selcted,
            onChanged: (value) {
              setState(() {
                _selcted = value;
                imageindex = _locations.indexOf(value);
              });
            },
          )
        ),
      ),
    );
  }
}

如何在点击下拉列表时更改背景图片？

1 个答案: