下面可以再准备一个演示布局用的小部件,放在 lib/playground/layout/components 里面,名字是 playground_layout_item.dart ,在这个文件里新建一个小部件,小部件的名字是 PlaygroundLayoutItem。
在小部件里声明一个属性,类型是 String,名字叫 textContent。然后添加一个构造方法,PlaygroundLayoutItem,支持一下 textContent 参数。
小部件的 build 方法 return 的东西,可以使用一个 Container,里面先用 padding 设置一下内边距,EdgeInsets.symmetric,vertical 垂直方向的内边距设置成 24.0,horizontal,水平方向的内边距设置成 30.0 。
再设置一下 decoration 属性,值是 BoxDecoration,在里面添加一个 border 属性,值是 Border.all,把 color 设置成 Colors.black,再把边框的 width,3.0。然后再添加一个 color ,把背景颜色设置成 Colors.yellow[200]。
然后设置一下 Container 小部件的 child 属性,值是一个 Text,文字的内容是小部件的 textContent 属性的值。这个属性的值在创建 PlaygroundLayoutItem 这个小部件的时候会提供。再用 style 设置一下文字的样式,把 fontSize 设置成 22.0 。
打开 playground_layout.dart,去掉这个 Container 的 width 还有 height 属性。然后再删除掉这个 Center 小部件。这里换成一个 PlaygroundLayoutItem 小部件,设置一下要显示的文字。观察一下应用界面,现在界面上会显示一个 PlaygroundLayoutItem 小部件。