第二章：Hello,Flutter（五）

ZWaruler

已于 2022-03-10 15:48:56 修改

阅读量356

点赞数

分类专栏： Flutter-从入门到放弃文章标签： flutter android

于 2022-02-27 22:17:05 首次发布

本文链接：https://blog.csdn.net/u010483016/article/details/123169467

版权

Flutter-从入门到放弃专栏收录该内容

24 篇文章 3 订阅

订阅专栏

Flutter-从入门到放弃(目录,持续更新中)

美化UI

目前在列表中使用的Card，还没有为它配置一些外观属性，看起来真是平平无奇，我们可以通过一些属性设置让Card显得更加的好看。在设置属性的过程中，我们可以通过hot reload功能，直观的感受到属性的效果。更改后的代码如下：


  Widget buildRecipeCard(Recipe recipe) {
    return Card(
      //1.Z轴上widget的位置，控制了Card下面的阴影效果
      elevation: 2.0,
      //2.Card的shape
      shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(10.0)),
      child: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          //3.Column里垂直方向上放置了Image和Text
          children: <Widget>[
            Image(image: AssetImage(recipe.imageUrl)),
            //4.在image和text之间加入了一个空白的填充空间
            const SizedBox(height: 14.0),
            //5.为Text定制了样式
            Text(
              recipe.label,
              style: const TextStyle(
                  fontSize: 20.0,
                  fontWeight: FontWeight.w700,
                  fontFamily: 'Palatino'),
            )
          ],
        ),
      ),
    );
  }

具体效果如下：
在这里插入图片描述
此时，我们可以打开Flutter Inspector界面，查看当前的Widget结构。我们可以在Widget结构中点击查看当前Widget的属性，查看对应的代码，非常方便进行调试，注意有时候需要刷新Flutter Inspector，具体的效果如下：
在这里插入图片描述

添加交互

现在我们的APP已经可以很好的展示一个食谱列表了，但是没有与用户交互的APP是乏味的，我们接下来将为APP添加一个点击效果，并在点击之后跳转到一个菜谱的详情界面。
在_MyHomePageState的ListView.builder中我们把之前itemBuilder中返回的**buildRecipeCard(Recipe.samples[index])**替换一下

 return GestureDetector(
              //8.实现onTap方法，它在Widget被点击时被回调
              onTap: () {
                //9.路由方法，后面将会了解更多
                Navigator.push(
                  context,
                  MaterialPageRoute(
                    builder: (context) {
                      //10.路由指向的界面，目前只是一个简单地Text，后面我们将添加一个详情界面
                      //TODO: Replace return with return RecipeDetail()
                      return const Text('Detail page');
                    },
                  ),
                );
              },
              //11.GestureDetector’s child的属性定义了手势交互的区域，就是之前的Card
              child: buildRecipeCard(Recipe.samples[index]),
            );