一、颜色的使用
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')],
),
],
),
