一、颜色的使用
color:Color(0xFFF3F5FB), --十六进制颜色，最后6位为十六进制颜色值 color: Color.fromARGB(255, 24, 34, 34)),--RGB颜色值， color： Color.fromARGB(0xFF, 0x42, 0xA5, 0xF5); color： Color.fromARGB(255, 66, 165, 245); color： Color.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')], ), ], ),
