在Flutter中使用TextEditingController()預覽圖片URL

我正在嘗試通過使用 TextEditingController() 的物件并在 TextFormField() 的控制器引數中使用該物件，通過其 URL 預覽來自 Internet 的隨機影像，但不幸的是它沒有顯示它。我在一個真實的設備中運行它，通過網路模擬器，但這一切都給了我同樣的問題。

class _EditProductScreenState extends State<EditProductScreen> {
  final _imageUrlController = TextEditingController();
      body: Padding(
        padding: const EdgeInsets.all(12.0),
        child: Form(
          child: ListView(
            children: [
              Row(
                crossAxisAlignment: CrossAxisAlignment.end,
                children: [
                  Container(
                    margin: EdgeInsets.only(
                      top: 10,
                      right: 15,
                    ),
                    height: 100,
                    width: 100,
                    decoration: BoxDecoration(
                      border: Border.all(
                        width: 1,
                        color: Colors.grey,
                      ),
                    ),
                    //Condition here & the image box
                    child: _imageUrlController.text.isEmpty
                        ? Center(
                            child: Text(
                              "Enter an Image URL",
                              textAlign: TextAlign.center,
                            ),
                          )
                        : FittedBox(
                            child: Image.network(
                              _imageUrlController.text,
                              fit: BoxFit.cover,
                            ),
                          ),
                  ),
                  //The TextFormField() here
                  Expanded(
                    child: TextFormField(
                      decoration: InputDecoration(
                        label: Text("Image URL"),
                      ),
                      keyboardType: TextInputType.url,
                      textInputAction: TextInputAction.done,
                      controller: _imageUrlController,

uj5u.com熱心網友回復：

請使用以下代碼更新您的代碼

@override
  void initState() {
    super.initState();
    // Start listening to changes.
    _imageUrlController.addListener((){
      setState((){
        text = _imageUrlController.text;
      });
    });
  }
    

以下是布局變化：

 Row(crossAxisAlignment: CrossAxisAlignment.end, children: [
                Container(
                  margin: EdgeInsets.only(
                    top: 10,
                    right: 15,
                  ),
                  height: 100,
                  width: 100,
                  decoration: BoxDecoration(
                    border: Border.all(
                      width: 1,
                      color: Colors.grey,
                    ),
                  ),
                  //Condition here & the image box
                  child: (text?.isEmpty ?? false)
                      ? Center(
                          child: Text(
                            "Enter an Image URL",
                            textAlign: TextAlign.center,
                          ),
                        )
                      : FittedBox(
                          child: Image.network(
                            text ?? "",
                            fit: BoxFit.cover,
                          ),
                        ),
                ),
                //The TextFormField() here
                Expanded(
                    child: TextFormField(
                  decoration: InputDecoration(
                    label: Text("Image URL"),
                  ),
                  keyboardType: TextInputType.url,
                  textInputAction: TextInputAction.done,
                  controller: _imageUrlController,
                ))
              ])

標籤：扑 视觉工作室 镖

上一篇：主題資料中的底部導航欄漸變圖示

下一篇：引數型別“TimeOfDay”不能分配給引數型別“DateTime”