Question

我在所有小部件中都有自定义绘画作为父级。用户可以根据需要添加任意多个小部件，例如（文本，文本字段，图像，按钮，图标）。默认情况下，当用户点击一次，仅将那个小部件的颜色设置为白色。在这里，当用户点击任何小部件时，所有小部件的父级颜色都变为白色，但我想一次只设置该小部件的白色。我的代码：var isSingleTapped=false; Stack( children: <Widget>[ Container( width: 200, height:200 child: InkWell( onTap: () { setState(() { isSingleTapped = true; });}, child: WidgetHandle( handleColor: isSingleTapped ? Colors.white : Colors.transparent, child: TextFormField( decoration: new InputDecoration( border: InputBorder.none, hintText: getAddress(), hintStyle: TextStyle(color: white, fontSize: 18), ), ))), Container( width: 200, height:200 child: InkWell( onTap: () { setState(() { isSingleTapped = true; });}, child: WidgetHandle( handleColor: isSingleTapped ? Colors.white : Colors.transparent, child: Icon( icon:Icons.face, color:white, size:32 ), ))), ..OtherWidget..

Answer 1

您应该对不同的小部件使用不同的变量来处理其颜色，或者，如果您有更多的小部件，则可以使用数组来存储状态。 针对较少的小部件

var isSingleTapped1=false,isSingleTapped2=false;
                 Stack(
                 children: <Widget>[
                  Container(
                  width: 200,
                  height:200
                  child: InkWell(
                    onTap: () {
                      setState(() {
                        isSingleTapped1 = true;
                      });},
                    child: WidgetHandle(
                           handleColor:
                          isSingleTapped1 ? Colors.white : Colors.transparent,
                      child: TextFormField(
                          decoration: new InputDecoration(
                          border: InputBorder.none,
                          hintText: getAddress(),
                          hintStyle: TextStyle(color: white, fontSize: 18),
                        ),
                      ))),
                      Container(
                  width: 200,
                  height:200
                  child: InkWell(
                    onTap: () {
                      setState(() {
                        isSingleTapped2 = true;
                      });},
                    child: WidgetHandle(
                           handleColor:
                          isSingleTapped2 ? Colors.white : Colors.transparent,
                      child: TextFormField(
                          decoration: new InputDecoration(
                          border: InputBorder.none,
                          hintText: getAddress(),
                          hintStyle: TextStyle(color: white, fontSize: 18),
                        ),
                      ))),
                      Container(..same code...),
                      Container(..same code...),

要获取更多数量的多个小部件

int numberOfContainers=10; 
List<bool> isSingleTapped=[];
for(i=0;i<numberOfContainers;i++)
    isSingleTapped[i]=false;

首先，我们将使用所需数量的小部件创建一个布尔数组，然后运行List.generate以使用我们的逻辑生成相同类型的小部件

             Stack(
                 children: List.generate(numberOfContainers,(position){
                     return Container(
                  width: 200,
                  height:200
                  child: InkWell(
                    onTap: () {
                      setState(() {
                        isSingleTapped[position] = true;
                      });},
                    child: WidgetHandle(
                           handleColor:
                          isSingleTapped[position] ? Colors.white : Colors.transparent,
                      child: TextFormField(
                          decoration: new InputDecoration(
                          border: InputBorder.none,
                          hintText: getAddress(),
                          hintStyle: TextStyle(color: white, fontSize: 18),
                        ),
                      ))),
                 })

更新如果要使用完整的自定义小部件，则必须使用List<Widget>并将小部件添加到该List。然后，您可以调用List.generate()并将数组的特定位置传递给子级WidgetHandle

List<Widget> list=[];
Stack(
                     children: List.generate(numberOfContainers,(position){
                         return Container(
                      width: 200,
                      height:200
                      child: InkWell(
                        onTap: () {
                          setState(() {
                            isSingleTapped[position] = true;
                          });},
                        child: WidgetHandle(
                               handleColor:
                              isSingleTapped[position] ? Colors.white : Colors.transparent,
                          child: list[position]
                          ))),
                     })

Answer 2

尝试一下

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

  final String title;

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

class DataModel {
  bool isTapped = false;
  Widget widget;

  DataModel(this.widget,this.isTapped);
}

class _MyHomePageState extends State<MyHomePage> {
  var _randomWidgets = [
    Text('Some Text Widget'),
    FlutterLogo(size: 50,),
    Icon(Icons.check_circle,),
    FlatButton(child: Text('Some Button Button Widget'),onPressed: (){},),
  ];

  // just to pick random element in array
  final _random = new Random();

  List<DataModel> _widgetList = List();

  @override
  Widget build(BuildContext context) {

    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: ListView.builder(itemBuilder: (context,index){
        Widget widget = _widgetList[index].widget;
        Color color = _widgetList[index].isTapped ? Colors.white : Colors.transparent;
        return widgetHandle(handleColor: color, child: widget,index: index);
      },itemCount: _widgetList.length,),
      floatingActionButton: FloatingActionButton(
        onPressed: _addWidget,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }

  //adds random widget to the list, this it where the user can add widgets 
  _addWidget(){
    _widgetList.add(DataModel(_randomWidgets[_random.nextInt(_randomWidgets.length)], false));
    setState(() {
    });
  }

  Widget widgetHandle({@required Color handleColor, @required Widget child, @required int index})
  {
    return GestureDetector(
    onLongPress: (){
      //this where the user can remove widgets from the list
      _widgetList.removeAt(index);
      setState(() {
      });
    },
    onTap: (){
      setState(() {
        if(_widgetList[index].isTapped)
        _widgetList[index].isTapped = false;
        else
          _widgetList[index].isTapped = true;
      });
    }, child: Container(child: child,color: handleColor,width: 200,height: 200,));
  }

}

Flutter Widgets的可见性

2 个答案: