Flutter组件使用技巧(一)

·  阅读 1038
Flutter组件使用技巧(一)

一、颜色的使用

color:Color(0xFFF3F5FB), --十六进制颜色,最后6位为十六进制颜色值

color: Color.fromARGB(255, 24, 34, 34)),--RGB颜色值,

color: Color.fromARGB(0xFF, 0x42, 0xA5, 0xF5);
colorColor.fromARGB(255, 66, 165, 245);
colorColor.fromRGBO(66, 165, 245, 1.0);//opacity:不透明度

color:Color.blue
复制代码

二、container设置

Container(
	width: 100,
	height: 100,
	alignment: Alignment.center,
	child: Text('有背景图'),
	decoration: BoxDecoration(
		color: Colors.red,
		image: DecorationImage(
			image: AssetImage('assets/images/dialog_success.png'),
			fit: BoxFit.fill, // 完全填充
		),
	),
),

Container(
    width: 250,
    height: 200,
    decoration: BoxDecoration(
      border: Border(
        top: BorderSide(width: 15.0, color: Color(0xFFFF7F7F7F)),
        left: BorderSide(width: 20.0, color: Color(0xFFFFDFDFDF)),
        right: BorderSide(width: 5.0, color: Color(0xFFFF000000)),
        bottom: BorderSide(width: 10.0, color: Color(0xFFFF000000)),
      ),
    )
)

Container(
          decoration: BoxDecoration(
            //设置边框
            border: new Border.all(color: Color(0xFFFF0000), width: 0.5),
            //背景颜色
            color: Colors.white, 
            //设置圆角
            borderRadius: new BorderRadius.circular((5.0)), 
 		  borderRadius: BorderRadius.only(
              topLeft: Radius.circular(10.0),
              bottomLeft: Radius.circular(10.0)
 		  ),
            //设置阴影
            boxShadow: [BoxShadow(color: Colors.lightGreen, offset: Offset(1.0, 1.0), blurRadius: 1.0, spreadRadius: 1.0), ],
          ),
)


Container(
          decoration: ShapeDecoration(
            image: new DecorationImage(
              //设置背景图片
              image: AssetImage("assets/images/task_icon.jpg"),
              fit: BoxFit.cover,
            ),
            //设置圆角
            shape:RoundedRectangleBorder(borderRadius: BorderRadiusDirectional.circular(20)),
          ),
          //设置边距
          margin: EdgeInsets.only(top: 16, left: 20, right: 20),
          child: new Card(
            color: Colors.transparent,
         ……
)

复制代码

三、showModalBottomSheet设置

Future<T> showModalBottomSheet<T>({
  @required BuildContext context, 
  @required WidgetBuilder builder, 
  Color backgroundColor,
  double elevation,
  ShapeBorder shape,
  Clip clipBehavior,
  Color barrierColor,
  bool isScrollControlled = false,
  bool useRootNavigator = false,
  bool isDismissible = true,
  bool enableDrag = true,
})


builder:构造内容
backgroundColor:背景颜色指的是显示内容下面的颜色,要设置圆角弹窗,该项使用null,默认是灰白色,根据系统主题
elevation :阴影高度,没看出效果
ShapeBorder: 边线,可以指定单边或者多边,还可以是圆形的,ShapeBorder的子类都可以,还可以设置圆角
clipBehavior :widget剪裁模式,分none、hardEdge、antiAlias、antiAliasWithSaveLayer,效率依次降低,效果依次提高
barrierColor: 蒙版颜色,就是遮住原页面内容的半透明黑色,默认是Colors.black54
isScrollControlled :是否可滚动,用于调整内容部分的高度的模式,后面展开详细
useRootNavigator: 一般用不上

isDismissible :点击外部区域是否关闭弹窗,默认true
enableDrag: 启用拖拽功能,拖动弹窗关闭,默认true

 showModalBottomSheet(
      context: context,
       isScrollControlled:false,
      backgroundColor: Colors.white,
      shape: RoundedRectangleBorder(borderRadius: BorderRadius.all(Radius.circular(10))),
	 shape: RoundedRectangleBorder(
         borderRadius: BorderRadius.only(  --设置左上角和右上角圆角
              topLeft: Radius.circular(20.0),
              topRight: Radius.circular(20.0)
 		     ),
      ),
      builder: (BuildContext context) {
        return Container(
          child: Center(child: Text("居中文字")),

        );
      });

若要点击按钮关闭弹窗,在点击事件里面加入Navigator.pop(context)即可
复制代码

四、TextField详解

TextField(
  controller: _inputController,//控制器
  focusNode: _inputFocusNode,//焦点
  style: TextStyle(fontSize: 16, color: Colors.black87),//文字大小、颜色
  maxLines: 10,//最多多少行
  minLines: 1,//最少多少行
  onChanged: (text) {//输入框内容变化回调
    setState(() {});
  },
  decoration: InputDecoration(
    fillColor: Colors.grey[50],//背景颜色,必须结合filled: true,才有效
    filled: true,//重点,必须设置为true,fillColor才有效
    isCollapsed: true,//重点,相当于高度包裹的意思,必须设置为true,不然有默认奇妙的最小高度
    contentPadding: EdgeInsets.symmetric(horizontal: 8, vertical: 10),//内容内边距,影响高度
    border: _outlineInputBorder,//边框,一般下面的几个边框一起设置
    //keyboardType: TextInputType.number, //键盘类型
    //obscureText: true,//密码模式
    focusedBorder: _outlineInputBorder,
    enabledBorder: _outlineInputBorder,
    disabledBorder: _outlineInputBorder,
    focusedErrorBorder: _outlineInputBorder,
    errorBorder: _outlineInputBorder,
      ),
    ),
)


/输入框控制器,一般用于获取文本、修改文本等
TextEditingController _inputController = TextEditingController();
//焦点节点,一般用于自动获取焦点,取消焦点以便隐藏键盘等
FocusNode _inputFocusNode = FocusNode();
//边框样式
OutlineInputBorder _outlineInputBorder = OutlineInputBorder(
  gapPadding: 0,
  borderSide: BorderSide(
    color: Colors.grey[200],
  ),
);

复制代码

五、Expanded详解

只能在Column,Row,Flex以及它们的子组件,这里指的是子组件而不是子结点,是指继承Column,Row,Flex的子组件。
Expanded的父结点必须是Column,Row,Flex以及它们的子组件,不能是Column->Container->Expanded(表示结点路径)
在使用Expanded时,如果在它的上层结点中有List类型的结点,比如SingleChildScrollView,或者ListTile等,其滑动方向应该与Expanded填充方向不同,不然会报错。
Expanded作用是,填充剩余空间。
class Expanded extends Flexible {
  /// Creates a widget that expands a child of a [Row], [Column], or [Flex]
  /// so that the child fills the available space along the flex widget's
  /// main axis.
  const Expanded({
    Key? key,
    int flex = 1,
    required Widget child,
  }) : super(key: key, flex: flex, fit: FlexFit.tight, child: child);
}

flex:表示弹性系数,弹性系数越高,所占空间越大,类似于Android原生的LinearLayout的weight属性。
child:子节点
示例
flutter代码

Scaffold(
      appBar: AppBar(
        // Here we take the value from the MyHomePage object that was created by
        // the App.build method, and use it to set our appbar title.
        title: Text(widget.title),
      ),
      body: Column(
        children: [
          Expanded(
              flex: 1,
              child: Container(
                color: Colors.black,
              )),
          Expanded(
              flex: 2,
              child: Container(
                color: Colors.red,
              )),
          Expanded(
              flex: 1,
              child: Container(
                color: Colors.blue,
              ))
        ],
      ), // This trailing comma makes auto-formatting nicer for build methods.
    );


Row 和 Column 是 Flex 组件,是无法滚动的,如果没有足够的空间,flutter就提示溢出错误。

这种情况下,Expanded 或 Flexible 组件可用作长文本的自动换行。


第一个元素再换成 Expanded ,这样剩余的空间就会被第一个元素填充:

Column(
  children: <Widget>[
    Row(
      children: <Widget>[
        Expanded(child: Text('AAAA')),
        Text('ZZZZ')],
    ),
  ],
),

这样,当第一个元素是一个长文本,并且两个元素内容长于可用范围时,第一个元素会自动换行:

Column(
  children: <Widget>[
    Row(
      children: <Widget>[
        Expanded(child: Text(String.fromCharCodes(List.generate(100, (i) => 65)))),
        Text('ZZZZ')],
    ),
  ],
),


复制代码
分类:
前端
收藏成功!
已添加到「」, 点击更改