窗口小部件无法正确构建

时间:2020-06-24 13:00:19

标签: flutter

我正在为我的应用制作一个ImagePicker小部件。我使用setState方法来更新_displayPictureLoadState_displayPictureSource参数以响应图像选择器事件。 dev.log('$loadState ${loadState == DisplayPictureState.loadSuccess}');每次都返回更新的值。但是,没有任何内联条件能够正确呈现。例如,开发人员登录了DisplayPictureState.loadSuccess true,但是内联三元运算符loadState == DisplayPictureState.loadSuccess ? Widget1 : Widget2返回了Widget2?我很困惑。我希望在此问题上有所帮助。

App.dart

        CSSDisplayPictureSelector(
            width: width,
            onTap: _skinCreatorService.setDisplayPicture,
            source: _displayPictureSource,
            loadState: _displayPictureLoadState),

CSSDisplayPictureSelector.dart

import 'dart:developer' as dev;
import 'package:flutter/material.dart';
import 'package:flutter_vector_icons/flutter_vector_icons.dart';
import 'package:[redacted]/Core/Services/Services.dart';
import 'package:[redacted]/Widgets/RoundedImage.dart';
import 'package:touchable_opacity/touchable_opacity.dart';

class CSSDisplayPictureSelector extends StatelessWidget {
  final double width;
  final Function onTap;
  final DisplayPictureState loadState;
  final source;
  const CSSDisplayPictureSelector(
      {Key key, this.width, this.onTap, this.loadState, this.source})
      : super(key: key);

  @override
  Widget build(BuildContext context) {
    dev.log('$loadState ${loadState == DisplayPictureState.loadSuccess}');
    return TouchableOpacity(
      onTap: onTap,
      child: Container(
        width: width,
        padding: EdgeInsets.only(left: 60, right: 60, top: 30),
        child: Center(
          child: Stack(
            children: <Widget>[
              loadState == DisplayPictureState.loadSuccess
                  ? RoundedImage(
                      byteSource: source,
                      size: width / 2,
                      key: UniqueKey(),
                    )
                  : RoundedImage(
                      imgSource: source,
                      size: width / 2,
                      key: UniqueKey(),
                    ),
              Container(
                width: width / 2,
                height: width / 2,
                decoration: BoxDecoration(
                  color: Color(0x88000011),
                  borderRadius: BorderRadius.circular(width),
                ),
                child: Center(
                  child: loadState == DisplayPictureState.loading
                      ? CircularProgressIndicator(
                          valueColor:
                              new AlwaysStoppedAnimation<Color>(Colors.white))
                      : Column(
                          mainAxisAlignment: MainAxisAlignment.center,
                          children: <Widget>[
                            Icon(Ionicons.md_camera,
                                size: 40, color: Colors.white),
                            Text(
                              loadState == DisplayPictureState.loadSuccess
                                  ? "Uploaded"
                                  : "Upload",
                              style: TextStyle(
                                color: Colors.white,
                                fontSize: 20,
                              ),
                            ),
                          ],
                        ),
                ),
              ),
            ],
          ),
        ),
      ),
    );
    ;
  }
}

RoundedImage.dart

import 'dart:developer' as dev;
import 'dart:io';

import 'package:flutter/material.dart';

class RoundedImage extends StatelessWidget {
  final String imgSource;
  final byteSource;
  final double size;
  final BorderSide border;
  bool borderInset;
  final Key key;

  var ImageBuilder;

  RoundedImage(
      {Key this.key,
      this.imgSource,
      this.byteSource,
      @required this.size,
      this.border,
      this.borderInset = true})
      : assert((imgSource == null && byteSource != null) ||
            (imgSource != null && byteSource == null)),
        super(key: key);

  @override
  Widget build(BuildContext context) {
    var makeRoundedImage;

    if (this.imgSource == null && this.byteSource != null) {
      dev.log('RoundedImageDebugLog',
          name: 'build:RoundedImage', error: {'data': 'hello $byteSource'});
      dev.debugger();
      makeRoundedImage = (diameter) => ClipRRect(
            borderRadius: BorderRadius.circular(diameter / 2),
            child: Image.memory(
              byteSource,
              width: diameter,
              height: diameter,
            ),
          );

    } else {
      makeRoundedImage = (diameter) => ClipRRect(
            borderRadius: BorderRadius.circular(diameter / 2),
            child: Image.asset(
              this.imgSource,
              width: diameter,
              height: diameter,
            ),
          );
    }

    if (this.border == null) {
      return makeRoundedImage(this.size);
    } else {
      double innerSize =
          this.borderInset ? this.size - this.border.width : this.size;
      double outerSize =
          this.borderInset ? this.size : this.size + this.border.width;

      return Stack(
        alignment: AlignmentDirectional.center,
        children: <Widget>[
          Container(
            width: outerSize,
            height: outerSize,
            decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(outerSize / 2),
              color: this.border.color,
            ),
          ),
          makeRoundedImage(innerSize),
        ],
      );
    }
  }
}

0 个答案:

没有答案