Flutter #03 各种形状布局清单

2019-05-06

目录：

1. 正方形
2. 圆形
3. 椭圆
4. 三角形
5. 五角星
6. 总结

1. 正方形

（1）普通正方形

    @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('shape: 正方形')),
      body: Center(
        child: Container(
          height: 200,
          width: 200,
          decoration: BoxDecoration(color: Colors.pinkAccent),
        ),
      ),
    );
  }

正方形

（2）立体正方形

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('shape: 立体正方形')),
      body: Center(
        child: Container(
          height: 200,
          width: 200,
          decoration: BoxDecoration(
            color: Colors.red,
            boxShadow: const [
              BoxShadow(blurRadius: 10),
            ],
          ),
        ),
      ),
    );
  }

立体正方形

（3） 线性渐变正方形

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('shape: 线性渐变正方形')),
      body: Center(
        child: Container(
          height: 200,
          width: 200,
          decoration: BoxDecoration(
            gradient: LinearGradient(
              colors: const [
                Colors.red,
                Colors.blue,
              ],
            ),
          ),
        ),
      ),
    );
  }

线性渐变正方形

（4）渲染正方形

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('shape: 渲染正方形')),
      body: Center(
        child: Container(
          height: 200,
          width: 200,
          decoration: BoxDecoration(
            gradient: RadialGradient(
              colors: const [Colors.yellow, Colors.blue],
              stops: const [0.4, 1.0],
            ),
          ),
        ),
      ),
    );
  }

渲染正方形

（5）五彩正方形

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('shape: 五彩正方形')),
      body: Center(
        child: Container(
          height: 200,
          width: 200,
          decoration: BoxDecoration(
            gradient: SweepGradient(
              colors: const [
                Colors.blue,
                Colors.green,
                Colors.yellow,
                Colors.red,
                Colors.blue,
              ],
              stops: const [0.0, 0.25, 0.5, 0.75, 1.0],
            ),
          ),
        ),
      ),
    );
  }

五彩正方形

（6）图片阴影正方形

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('shape:图片背景正方形')),
      body: Center(
        child: Container(
          height: 200,
          width: 200,
          foregroundDecoration: BoxDecoration(
            backgroundBlendMode: BlendMode.exclusion,
            gradient: LinearGradient(
              colors: const [
                Colors.red,
                Colors.blue,
              ],
            ),
          ),
          child: Image.network(
            'https://flutter.io/images/catalog-widget-placeholder.png',
          ),
        ),
      ),
    );
  }

图片阴影正方形

2. 圆形

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('shape: 圆形')),
      body: Center(
        child: Container(
          height: 200,
          width: 200,
          decoration: BoxDecoration(
            color: Colors.purpleAccent,
            shape: BoxShape.circle,
          ),
        ),
      ),
    );
  }

圆

3. 椭圆

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('shape: 椭圆')),
      body: Center(
        child: Container(
          height: 200,
          width: 200,
          decoration: BoxDecoration(
            color: Colors.yellow,
            border: Border.all(color: Colors.yellowAccent, width: 2),
            borderRadius: BorderRadius.all(Radius.circular(18)),
          ),
        ),
      ),
    );
  }

椭圆

4. 三角形

 @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('shape: 三角形')),
      body: Center(
        child: Container(
          height: 400,
          width: 400,
          transform: Matrix4.rotationZ(pi /4),
          decoration: BoxDecoration(color: Colors.green),
        ),
      ),
    );
  }

三角形

5. 五角星

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('shape: 五角星')),
      body:Row /*or Column*/(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Icon(Icons.star, size: 50),
          Icon(Icons.star, size: 50),
          Icon(Icons.star_half, size: 50),
        ],
      ),
    );
  }

五角星

6. 总结

---

文章是 Android 面向需求开发系列中的一文，更多相关文章请关注。如若有什么问题，也可以通过扫描二维码发消息给我。转载请注明出处，谢谢！

二维码