如何隐藏 flutter 中的小部件？

Question

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

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数组长度将始终返回 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。