flutter学习--Container容器组件

最新推荐文章于 2024-04-10 21:58:54 发布

原创最新推荐文章于 2024-04-10 21:58:54 发布 · 618 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#flutter #android

android 同时被 2 个专栏收录

85 篇文章

订阅专栏

flutter

16 篇文章

订阅专栏

本文详细介绍了Flutter中的Container组件，包括Alignment属性如bottomCenter、topRight等对齐方式，设置宽高和颜色，padding和margin的使用，以及如何通过decoration属性创建背景和边框，如BoxDecoration实现渐变背景，并展示了设置边框的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Alignment属性

bottomCenter:下部居中对齐。
botomLeft: 下部左对齐。
bottomRight：下部右对齐。
center：纵横双向居中对齐。
centerLeft：纵向居中横向居左对齐。
centerRight：纵向居中横向居右对齐。
topLeft：顶部左侧对齐。
topCenter：顶部居中对齐。
topRight：顶部居左对齐。

import 'package:flutter/material.dart';
void main () => runApp(MyApp());

class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context ){
      return MaterialApp(
        title:'Text widget',
        home:Scaffold(
          body:Center(
           child:Container(
             child:new Text('Hello JSPang',style: TextStyle(fontSize: 40.0),),
             alignment: Alignment.center,
           ),
          ),
        ),
      );
  }
}

设置宽、高和颜色属性

child:Container(
  child:new Text('Hello JSPang',style: TextStyle(fontSize: 40.0),),
  alignment: Alignment.center,
  width:500.0,
  height:400.0,
  color: Colors.lightBlue,
),

padding属性

padding:const EdgeInsets.all(10.0),

设置上边距为30，左边距为10

padding:const EdgeInsets.fromLTRB(10.0,30.0,0.0,0.0),

margin属性

把container的外边距设置为10个单位

child:Container(
  child:new Text('Hello JSPang',style: TextStyle(fontSize: 40.0),),
  alignment: Alignment.topLeft,
  width:500.0,
  height:400.0,
  color: Colors.lightBlue,
  padding:const EdgeInsets.fromLTRB(10.0,30.0,0.0,0.0),
  margin: const EdgeInsets.all(10.0),
),

decoration属性

decoration是 container 的修饰器，主要的功能是设置背景和边框。

比如你需要给背景加入一个渐变，这时候需要使用BoxDecoration这个类，代码如下（需要注意的是如果你设置了decoration，就不要再设置color属性了，因为这样会冲突）。

child:Container(
  child:new Text('Hello JSPang',style: TextStyle(fontSize: 40.0),),
  alignment: Alignment.topLeft,
  width:500.0,
  height:400.0,
  padding:const EdgeInsets.fromLTRB(10.0,30.0,0.0,0.0),
  margin: const EdgeInsets.all(10.0),
  decoration:new BoxDecoration(
    gradient:const LinearGradient(
      colors:[Colors.lightBlue,Colors.greenAccent,Colors.purple]
    )
  ),
),

设置边框

设置边框可以在decoration里设置border属性，比如你现在要设置一个红色边框，宽度为2

border:Border.all(width:2.0,color:Colors.red)