Flutter 小部件可見性點擊

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數組，然后運行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()並將數組的特定位置傳遞給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,));
  }

}