如何在 flutter 中隐藏小部件？

Question

我正在尝试隐藏一个具有列表数组和列表数组获取 _images.length 的小部件。例如，如果 image.length 为 Null，就像没有图像一样，所以我想隐藏需要 space.Not 的容器，确定我丢失了什么。我尝试了下面的代码。请帮帮我，谢谢。或者如果有任何其他方法可以做到这一点，请告诉我。我只是一个初学者。

class PortfolioGallarySubPage extends StatefulWidget{



PortfolioGallarySubPage({Key key,@required this.urls,@required this.currentIndex})
  :super(key:key);

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

 class _PortfolioGallarySubPage extends State<PortfolioGallarySubPage>
with SingleTickerProviderStateMixin{
final GlobalKey<FormState> formKey = new GlobalKey<FormState>();
final GlobalKey<ScaffoldState> key = new GlobalKey<ScaffoldState>();


List<File> _images = [];


final picker = ImagePicker();
Future getImage() async {
final pickedFile = await picker.getImage(source: ImageSource.gallery);

setState(() {
  if (pickedFile != null) {
    _images.add(File(pickedFile.path));
  }
  else {
    print('No image selected.');
  }
});
  }
   @override
void initState() {
super.initState(); 
}
     @override void dispose() 
 {
super.dispose();

}

  bool isVisible = true;

void changeVisibility(){
setState(() {
  if(_images.length ==null  ){
    isVisible = !isVisible;
  }
});
 } 

@override
Widget build(BuildContext context) {
  
return Scaffold(
  key: key,
  extendBodyBehindAppBar: true,
  appBar: AppBar(
    elevation: 0,
    backgroundColor: Colors.transparent,
    actions: [
      ElevatedButton(
        child: Text("DONE",style: TextStyle(fontSize: 15)),
        onPressed: (){
          _uploadImages();
          },
        style: ElevatedButton.styleFrom(padding: EdgeInsets.fromLTRB(25.0, 15.0, 25.0, 10.0),
            shape: RoundedRectangleBorder(
                borderRadius: BorderRadius.circular(30.0))),
      ),
    ],
  ),
  body: Container(
    width: _maxScreenWidth,
    child: SafeArea(
      child:Form(
        key: formKey,
        child: SingleChildScrollView(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.start,
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [

         Visibility(

                visible: isVisible,

                child: Container(
                  height: 150.0,
                  padding: EdgeInsets.symmetric(vertical: 15.0,horizontal: 15),

                  child: ListView(
                    scrollDirection: Axis.horizontal,
                    children: [

                      SizedBox(width: 15.0),

                      ListView.builder(
                        scrollDirection: Axis.horizontal,
                        shrinkWrap: true,
                        itemCount: _images.length,
                        itemBuilder: (BuildContext context,int index){
                          //return Padding(padding: const EdgeInsets.only(top: 0.0,bottom: 0.0),
                          return InkWell(
                            onTap: () => print('tapped'),
                         

                            child: Card(
                              elevation: 10,
                              child: SizedBox(height:150, width: 150,child: Image.file(_images[index], fit: BoxFit.cover,)) ,
                            ),
                          );
                        },
                      ),

                    ],
                  ),
                ),
              ),

                      ],
                    ),
                ),

            ],
          ),
        ),
      ),
    ),
  ),
);
}
 }

Answer 1

_images 如果列表为空，数组长度总是return 0，所以你需要将条件设置为

setState(() {
    isVisible = _images.length > 0;
});

而不是采用变量 isVisible 设置 _images.length > 0 如

visible: _images.length > 0

并删除 isVisible 变量....它会在 _images 列表更新时更新可见性

Answer 2

还有另一种不使用可见小部件的解决方案：

class Mywidget extends StatefulWidget {
  @override
  _MywidgetState createState() => _MywidgetState();
}

class _MywidgetState extends State<Mywidget> {
  double width;
  double heigth;
  void changeVisibility() {
    setState(() {
      if (_images.length == null) {
        width=any width you want ;
        heigth = any height you want ;
      }else{
        setState(() {
          width=0;
          heigth=0;
        });
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    // the contanier that you want to be visble
    return Container(
      height: heigth,
      width: width,
      // the list view that has the images 
      child: ListView(),
    );
  }
}

如果有图片，小部件的高度和宽度将不为零但如果不是，则小部件将可见，因为宽度和高度将等于零

Answer 3

正如我在代码片段中看到的，您没有在任何地方调用 changeVisibility 方法。因此，isVisible 将始终保持 true

因此，无论您在何处调用 getImage 方法，都请调用 changeVisibility。

还有，这个逻辑本来就不对，

一开始初始化isVisible为false，这样当有图片的时候就可以让它为true

如何在 flutter 中隐藏小部件？

how to hide a widget in flutter?

flutter

flutter-test