美文网首页
Flutter学习基础组件之Container

Flutter学习基础组件之Container

作者: 给你快乐 | 来源:发表于2020-03-23 15:09 被阅读0次

    Container相当于iOS中的UIView,可以设置大小,颜色,边框,圆角等属性

    MaterialApp、Center和Scaffold也是基础组件,这里先做简单了解

    void main() => runApp(MyApp());//入口函数
    
    class MyApp extends StatelessWidget {
      // This widget is the root of your application.
      @override//代表重写build方法,build方法类似于ViewControllerr里的ViewDidLoad
      Widget build(BuildContext context) {
        return MaterialApp(//MaterialApp和Scaffold
          home: Scaffold(
            appBar: AppBar(
              title: Text('Demo',
                style: TextStyle(
                  color: Colors.red
                ),),
            ),
            body: HomeContent(),//页面展示的内容
          )
        );
      }
    }
    

    Container用法在这里,它的属性有
    width、height、child、decoration(背景色,圆角,边框都在这里设置)

    class HomeContent extends StatelessWidget{
      @override
      Widget build(BuildContext context) {
        // TODO: implement build
        return Center(//让Container在屏幕中居中显示
          child: Container(
            width: 200,
            height: 200,
            decoration: BoxDecoration(
              color: Colors.red,//背景色
              border: Border.all(//边框
                color: Colors.black,//边框色
                width: 5//边框宽度
              ),
              borderRadius: BorderRadius.all(
                Radius.circular(10),//设置圆角
              ),
            ),
            padding: EdgeInsets.all(20),//内边距
            alignment: Alignment.bottomRight,//内部内容的对齐方式
            child: Text('内容',
            textAlign: TextAlign.center,//对齐方式
              overflow: TextOverflow.ellipsis,//超出范围的显示方式为3个.
              maxLines: 1,//最大显示行数
            style: TextStyle(fontSize: 30,
              color: Colors.orange
            ),
            ),
          ),
        );
      }
    }
    

    相关文章

      网友评论

          本文标题:Flutter学习基础组件之Container

          本文链接:https://www.haomeiwen.com/subject/kvdwyhtx.html