Flutter之BuilderContext和Widget关系浅析

Flutter的Widget有StatelessWidget和StatefulWidget两个子类(当然还有其他子类,此处暂且不谈),二者的的使用方式大致模板代码如下:

//StatelessWidget的使用模板代码
class StatelessWidgetDemo extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return null;///返回创建的页面
  }
}


//StatefulWidget的使用方式模板代码
class StatefulWidgetDemo extends StatefulWidget{
  @override
  State<StatefulWidget> createState() {
    //创建state对象
    return _State();
  }
}
class _State extends State<StatefulWidgetDemo>{
  //创建页面
  @override
  Widget build(BuildContext context) {
    return null;
  }
}

这是典型的模板设计模式的应用,我们只需要依葫芦画瓢就可以创建所需的UI页面。本篇博文主要来讲讲Widget的一些基本知识。
阅读上面的代码,可以跑出一下问题:
1) build方法需要一个BuildContext参数,那么这个BuildContext是什么?
2)build方法是模板方法,那么什么时候调用的呢?
带着这两个问题,后面简单的梳理下Widget的结构,

  • 2
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 5
    评论
要在 Flutter 中实现评论区 Widget,你可以创建一个自定义的 StatefulWidget,其中包含一个输入框和一个评论列表。用户可以在输入框中输入评论并提交,评论将被添加到评论列表中。以下是一个简单的示例代码: ```dart class CommentWidget extends StatefulWidget { @override _CommentWidgetState createState() => _CommentWidgetState(); } class _CommentWidgetState extends State<CommentWidget> { TextEditingController _controller = TextEditingController(); List<String> _comments = []; void _addComment() { setState(() { _comments.add(_controller.text); _controller.clear(); }); } @override Widget build(BuildContext context) { return Column( children: [ TextField( controller: _controller, decoration: InputDecoration( hintText: "写下你的评论", suffixIcon: IconButton( icon: Icon(Icons.send), onPressed: _addComment, ), ), onSubmitted: (String value) { _addComment(); }, ), Expanded( child: ListView.builder( itemCount: _comments.length, itemBuilder: (BuildContext context, int index) { return ListTile( title: Text(_comments[index]), ); }, ), ), ], ); } } ``` 在这个示例代码中,我们首先创建了一个 CommentWidget StatefulWidget。在 StatefulWidget 的状态类 _CommentWidgetState 中,我们定义了一个 TextEditingController 和一个 List 来存储评论。在 build 方法中,我们创建了一个包含输入框和评论列表的 Column。在输入框中,我们使用 TextField 组件来接受用户的输入,并添加了一个 IconButton 来提交评论。在评论列表中,我们使用 ListView.builder 组件来渲染评论列表,并使用 ListTile 组件来显示每条评论的内容。 你可以将 CommentWidget 组件添加到你的 Flutter 页面中来展示评论区,并通过调用 setState 方法来更新评论列表。
评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

郭梧悠

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值