Flutter 初探(三)：容器类Widgets

学习内容

以下是容器类Widgets的部分汇总：

• Padding
• 布局限制类容器ConstrainedBox和SizedBox
• 装饰类容器DecoratedBox
• 变换Transform
• Container容器
• Scaffold、底部导航

各个容器简易实现

// Padding
class NewPadding extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: AppBar(title: Text('Padding学习')),
      body: new Padding(
          // 上下左右各添加16像素空白
          padding: EdgeInsets.all(16.0),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: <Widget>[
              Padding(
                // 左边添加8像素补白
                padding: const EdgeInsets.only(left: 8.0),
                child: Text('Hello world'),
              ),
              Padding(
                //上下各添加8像素补白
                padding: const EdgeInsets.symmetric(vertical: 8.0),
                child: Text("I am Jack"),
              ),
              Padding(
                // 分别指定四个方向的补白
                padding: const EdgeInsets.fromLTRB(20.0, .0, 20.0, 20.0),
                child: Text("Your friend"),
              )
            ],
          )),
    );
  }
}

// 布局限制类容器 ConstrianedBox、SizeBox
// 预先定义一个redBox，一个红色背景的盒子
Widget redBox = DecoratedBox(
  decoration: BoxDecoration(color: Colors.red),
);

class NewConstrainedBox extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
        appBar: AppBar(title: Text("ConstrianedBox、SizeBox学习")),
        body: new Column(
          children: <Widget>[
            new Text('ConstrainedBox：'),
            new ConstrainedBox(
              // 最小高度50，宽度尽可能大的红色容器
              constraints:
                  BoxConstraints(minWidth: double.infinity, minHeight: 50.0),
              // 虽然container高度为5但是，容器的最小高度为50，所以最终生效的是50
              child: Container(height: 5.0, child: redBox),
            ),
            // SizedBox用于给子Widget指定固定的宽高
            new Text('SizedBox：'),
            SizedBox(
              width: 80.0,
              height: 80.0,
              child: redBox,
            ),
            new Text('多重限制案例：'),
            // 多重限制案例
            ConstrainedBox(
                // 父
                constraints: BoxConstraints(minWidth: 60.0, minHeight: 60.0),
                child: ConstrainedBox(
                  constraints: BoxConstraints(minWidth: 90.0, minHeight: 20.0),
                  child: redBox,
                )),
            new Text('调换限制条件：'),
            ConstrainedBox(
                // 父
                constraints: BoxConstraints(minWidth: 90.0, minHeight: 20.0),
                child: ConstrainedBox(
                  constraints: BoxConstraints(minWidth: 60.0, minHeight: 60.0),
                  child: redBox,
                )),
            new Text("'去除'多重限制"),
            ConstrainedBox(
              constraints: BoxConstraints(minWidth: 60, minHeight: 100),
              child: UnconstrainedBox(
                child: ConstrainedBox(
                  constraints: BoxConstraints(minWidth: 90, minHeight: 20),
                  child: redBox,
                ),
              ),
            ),
          ],
        ));
  }
}

// 装饰容器DecoratedBox 漂亮警告
class NewDecoratedBox extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: AppBar(title: Text('NewDecoratedBox学习')),
      body: new DecoratedBox(
          decoration: BoxDecoration(
            // 背景渐变
            gradient: LinearGradient(colors: [Colors.red, Colors.orange[700]]),
            // 像素圆角
            borderRadius: BorderRadius.circular(3.0),
            boxShadow: [
              BoxShadow(
                  color: Colors.black54,
                  offset: Offset(2.0, 2.0),
                  blurRadius: 4.0),
            ],
          ),
          child: new Padding(
            padding: EdgeInsets.symmetric(horizontal: 80.0, vertical: 18.0),
            child: Text(
              "Login",
              style: TextStyle(color: Colors.white),
            ),
          )),
    );
  }
}

class NewTransformAndContainer extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
        appBar: AppBar(title: Text("Transform学习")),
        body: new Column(
          children: <Widget>[
            Container(
              color: Colors.black,
              child: new Transform(
                alignment: Alignment.topRight,
                transform: new Matrix4.skewY(0.3),
                child: new Container(
                  padding: const EdgeInsets.all(8.0),
                  color: Colors.deepOrange,
                  child: const Text("Apartment for rent!"),
                ),
              ),
            ),
            DecoratedBox(
                decoration: BoxDecoration(color: Colors.red),
                child: Transform.translate(
                  offset: Offset(-20.0, -5.0),
                  child: Text("Hello world"),
                )),
            DecoratedBox(
              decoration: BoxDecoration(color: Colors.red),
              child: Transform.rotate(
                //旋转90度
                angle: math.pi / 2,
                child: Text("Hello world"),
              ),
            ),
            DecoratedBox(
                decoration: BoxDecoration(color: Colors.red),
                child: Transform.scale(
                    scale: 1.5, //放大到1.5倍
                    child: Text("Hello world"))),
            Container(
              margin: EdgeInsets.all(20.0), //容器外补白
              color: Colors.orange,
              child: Text("Hello world!"),
            ),
            Container(
              padding: EdgeInsets.all(20.0), //容器内补白
              color: Colors.orange,
              child: Text("Hello world!"),
            ),
            Padding(
              padding: EdgeInsets.all(20.0),
              child: DecoratedBox(
                decoration: BoxDecoration(color: Colors.orange),
                child: Text("Hello world!"),
              ),
            ),
            DecoratedBox(
              decoration: BoxDecoration(color: Colors.orange),
              child: Padding(
                padding: const EdgeInsets.all(20.0),
                child: Text("Hello world!"),
              ),
            ),
            Container(
              margin: EdgeInsets.only(top: 50.0, left: 120.0), //容器外补白
              constraints:
                  BoxConstraints.tightFor(width: 200.0, height: 150.0), //卡片大小
              decoration: BoxDecoration(
                  //背景装饰
                  gradient: RadialGradient(
                      //背景径向渐变
                      colors: [Colors.red, Colors.orange],
                      center: Alignment.topLeft,
                      radius: .98),
                  boxShadow: [
                    //卡片阴影
                    BoxShadow(
                        color: Colors.black54,
                        offset: Offset(2.0, 2.0),
                        blurRadius: 4.0)
                  ]),
              transform: Matrix4.rotationZ(.2), //卡片倾斜变换
              alignment: Alignment.center, //卡片内文字居中
              child: Text(
                //卡片文字
                "5.20", style: TextStyle(color: Colors.white, fontSize: 40.0),
              ),
            ),
          ],
        ));
  }
}

// Scaffold、TabBar、底部导航
class ScaffoldRoute extends StatefulWidget {
  @override
  _ScaffoldRouteState createState() => new _ScaffoldRouteState();
}

class _ScaffoldRouteState extends State<ScaffoldRoute> {
  

  
  int _selectedIndex = 1;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        //导航栏
        title: Text("App Name"),
        // 手动设置leading自定义菜单图标
        // leading: Builder(builder: (context){
        //   return IconButton(icon: Icon(Icons.dashboard), color: Colors.white,
        //     onPressed: (){
        //       Scaffold.of(context).openDrawer();
        //     },
        //   );
        // },),
        actions: <Widget>[
          //导航栏右侧菜单
          IconButton(icon: Icon(Icons.share), onPressed: () {}),
        ],
      ),
      // drawer: new MyDrawer(), //抽屉
      bottomNavigationBar: BottomNavigationBar(
        items: <BottomNavigationBarItem>[
          BottomNavigationBarItem(icon: Icon(Icons.home), title: Text('home')),
          BottomNavigationBarItem(icon: Icon(Icons.business), title: Text('business')),
          BottomNavigationBarItem(icon: Icon(Icons.school), title: Text("school")),

        ],
        currentIndex: _selectedIndex,
        fixedColor: Colors.blue,
        onTap: _onItemTapped,
      ),
      floatingActionButton: FloatingActionButton(
        child: Icon(Icons.ac_unit),
        onPressed: _onAdd,
      ),
    );
  }

  void _onItemTapped(int index) {
    setState(() {
      _selectedIndex = index;
    });
  }

  void _onAdd() {}
}

以下是一些效果截图：

Summary

容器类愈加抽象，但是给布局和各种酷炫实现打下了坚实的基础和广阔的想象力，是个诱惑而充满挑战的体验。