flutter 上的可編輯文本 flutter

Question

我是 Flutter 的新手。我想讓文本可編輯，但它顯示了一些錯誤。 我做對了嗎？ 下面顯示我想要的設計。 我希望有人也能簡單地給我解釋一下。 太感謝了！

class EditNameEmail extends StatefulWidget {

  bool _isEnable = false; //_isEnable is the boolean variable and set it false, so we have to make it true when user tap on text
  TextEditingController _controller =
  TextEditingController(text: 'Wong Yuk Hei'); 

  @override
  State<EditNameEmail> createState() => _EditNameEmailState();
}

class _EditNameEmailState extends State<EditNameEmail> {
  @override
  Widget build(BuildContext context) {
    return Container(
      padding: EdgeInsets.all(15.0), 
      child: Column( 
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [ 
          Text('Name', style: TextStyle(color: Colors.blueAccent, fontWeight: FontWeight.bold
          ),),
          Row( 
            children: <Widget> [
              Container( 
                child: TextField( 
                  controller: _controller,
                  enabled: _isEnable,
                ),
              ), 
              IconButton(
                icon: Icon(Icons.edit), 
                onPressed: () { 
                  setState (() => { 
                    _isEnable = true;
                  });
                }),
              
            ],
          )
        ],
      ),
    );
  }
}

Answer 1

首先，將_isEnable和_controller移動到_EditNameEmailState class。因為小部件是不可變的，所以您需要將 state 的值放在 state class 中。

其次，使用Expanded小部件。 請參閱無界高 - Flutter 頻道了解更多信息。

第三，如果您使用代碼塊 ( (){} )，則 lambda function 不使用箭頭 ( => )。

不要

() => {}

做

() {}
// or
() => someReturnValue

完整代碼

完整的代碼在這里。

class EditNameEmail extends StatefulWidget {
  @override
  State<EditNameEmail> createState() => _EditNameEmailState();
}

class _EditNameEmailState extends State<EditNameEmail> {
  bool _isEnable = false; //_isEnable is the boolean variable and set it false, so we have to make it true when user tap on text
  TextEditingController _controller = TextEditingController(text: 'Wong Yuk Hei');

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: EdgeInsets.all(15.0),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Text(
            'Name',
            style: TextStyle(color: Colors.blueAccent, fontWeight: FontWeight.bold),
          ),
          Row(
            children: <Widget> [
              Expanded(
                child: TextField(
                  controller: _controller,
                  enabled: _isEnable,
                ),
              ),
              IconButton(
                  icon: Icon(Icons.edit),
                  onPressed: () {
                    setState (() {
                      _isEnable = true;
                    });
                  }),
            ],
          )
        ],
      ),
    );
  }
}