flutter(3) + 案例

抽取
通过前面的学习,我们会发现我们的嵌套过多,因此,我们需要创建自己的Widget

所以我们这么做:
class contentWidget extends StatelessWidget {}
我们点进StatelessWidget的源码会发现StatelessWidget是一个抽象类,而里面的build的方法没有实现,因此我们的contentWidget类必须实现这个方法
class contentWidget extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Center(
child: Text(
‘hello world’,
textDirection: TextDirection.ltr,
style: TextStyle(fontSize: 40, color: Colors.orange),
),
);
}
}
很多个都可以抽出来
import ‘package:flutter/material.dart’;

main() => runApp(Myapp());

class Myapp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: ‘hello?’,
home: Scaffold(
appBar: AppBar(
title: Text(‘我是标题’),
),
body: contentWidget()),
);
}
}

class contentWidget extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Center(
child: TextWidget(),
);
}
}

class TextWidget extends StatelessWidget {
@override
Widget build(BuildContext context) {
return const Text(
‘hello world’,
textDirection: TextDirection.ltr,
style: TextStyle(fontSize: 40, color: Colors.orange),
);
}
}
案例
今天来做一个案例,做一个展示这些和文字的案例,大概长这样

import ‘package:flutter/material.dart’;

void main(List args) {
runApp(Myapp());
}

class Myapp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text(‘我是标题’),
backgroundColor: const Color.fromARGB(187, 243, 56, 146),
),
body: HomeContent(),
),
);
}
}
其实到这里就是昨天学的,应该都能看懂,此时的效果是这样的
现在我们主要就学习HomeContent,里面是怎么写的
首先,我们会发现元素都是竖着排列的,所以我们可以使用Column将元素包裹,这样他就能竖着排列,我们先随便写几个试试
既然Column里面是包裹着很多个元素的,那他的children就是list类型的
class HomeContent extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Column(
children: Text(‘hello’), Text(‘hello’), Text(‘hello’) ,
);
}
}

按照组件的思想,我们肯定是会将上面的两行文字和作成一个组件,然后复用
所以我们将他单独抽出来,写在PruductItem中

class HomeContent extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Column(
children: [
PruductItem(),
PruductItem(),
PruductItem(),
],
);
}
}

class PruductItem extends StatelessWidget {
const PruductItem({super.key});

@override
Widget build(BuildContext context) {
return Column(
children: Text(‘pc1’), Text(‘hello pc1’), Image.network( ‘https://img2.baidu.com/it/u=2754696402,52690942&fm=253&fmt=auto&app=120&f=JPEG?w=750&h=500’) ,
);
}
}

但是我们发现最下面有斑马纹,其实是因为我们的元素超出了页面底部,所以我们要将Column改为ListView
class HomeContent extends StatelessWidget {
@override
Widget build(BuildContext context) {
—-> return ListView(
children: [
PruductItem(),
PruductItem(),
PruductItem(),
],
);
}
}

这样就可以了
现在再改进一下,我们要给每个PruductItem传不同的值,按照我们之前学的关于类的知识,应该这样写
class PruductItem extends StatelessWidget {
final String title;
final String desc;
final String pic;
const PruductItem(this.title, this.desc, this.pic, {super.key});

@override
Widget build(BuildContext context) {
return Column(
children: [Text(title), Text(desc), Image.network(pic)],
);
}
}
注意这里的final是必须要加的,否则会有警告
这样使用:

class HomeContent extends StatelessWidget {
const HomeContent({super.key});
@override
Widget build(BuildContext context) {
return ListView(
children: const [
PruductItem(‘pc111’, ‘hello pc1’,
‘https://img2.baidu.com/it/u=2754696402,52690942&fm=253&fmt=auto&app=120&f=JPEG?w=750&h=500’),
PruductItem(‘pc2’, ‘hello pc2’,
‘https://img2.baidu.com/it/u=2754696402,52690942&fm=253&fmt=auto&app=120&f=JPEG?w=750&h=500’),
PruductItem(‘pc3’, ‘hello pc3’,
‘https://img2.baidu.com/it/u=2754696402,52690942&fm=253&fmt=auto&app=120&f=JPEG?w=750&h=500’),
],
);
}
}
效果也是一样的
细节调整
添加间距
现在的文字和文字之间的间距太小,我们需要加一个SizedBox元素,将他们隔开
class PruductItem extends StatelessWidget {
final String title;
final String desc;
final String pic;
const PruductItem(this.title, this.desc, this.pic, {super.key});

@override
Widget build(BuildContext context) {
return Column(
children: [
Text(title),
const SizedBox(
height: 5,
),
Text(desc),
const SizedBox(
height: 10,
),
Image.network(pic)
],
);
}
}

添加padding
这个比较麻烦点
例如,我们要给我们的ListView加上个四边的padding,我们需要在ListView外层包裹一个Padding
class HomeContent extends StatelessWidget {
const HomeContent({super.key});
@override
Widget build(BuildContext context) {
return Padding(
padding: const EdgeInsets.all(20.0),
child: ListView(
children: const [
…
],
),
);
}
}
其实这里有个快捷键,我们不用把原来的剪切掉,写完Padding再塞回去,我们只要光标点到我们需要被包裹的元素上,按下ctrl+.,就会出来这个东西,选Padding他就会自己把ListView包裹在Padding里。不过我发现我的不行，我将快捷键修改了一下就能用了。

如果只想给一个方向加也可以，看提示就知道了，我不做演示了
添加边框
使用Container包裹,这个有点麻烦哈哈哈,这个根据提示好像找不到用法,所以只能多用用记住他
return Container(
decoration: BoxDecoration(border: Border.all()),
child: Column(
children: [
Text(title),
const SizedBox(
height: 5,
),
Text(desc),
const SizedBox(
height: 10,
),
Image.network(pic)
],
),
);
看看最终的效果

大概就是这个样子
关于快捷键,我发现下面的选项其实也不用去点,打前几个字母会自动定位过去,我真是个天才…🤭