分类目录
Text(
'给我一个理由忘记',
overflow: TextOverflow.ellipsis,
maxLines: 2,
style: TextStyle(
fontSize: 13.0
),
)
在某些场景下无法换行，请用 Expanded
Expanded (
child: Text(
'给我一个理由忘记',
overflow: TextOverflow.ellipsis,
maxLines: 2,
style: TextStyle(
fontSize: 13.0
),
)
)
也可以套 Container ，设置宽度来限制文本的宽度。
请看
- 怎么设置样式
- 怎么设置宽高 padding
https://blog.csdn.net/mengks1987/article/details/109480289
http://events.jianshu.io/p/ad231ab22cee
https://www.jianshu.com/p/5d24fd29ab8b
想要的东东
- 设置按钮的 padding，margin 为 零
style: ButtonStyle(
tapTargetSize: MaterialTapTargetSize.shrinkWrap,
minimumSize: MaterialStateProperty.all(Size(0, 0)),
padding: MaterialStateProperty.all(EdgeInsets.zero),
)
- 设置形状
style: ButtonStyle(
shape: MaterialStateProperty.all(RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10)))
)
- 去掉阴影
style: ButtonStyle(
shadowColor: MaterialStateProperty.all(Colors.transparent),
)
- 去掉水波纹(去掉水波纹后，hove 等效果也没了)
style: ButtonStyle(
splashFactory: NoSplash.splashFactory
)
- 设置按钮内文字的样式
style: ButtonStyle(
textStyle: MaterialStateProperty.all(TextStyle(fontSize: 16.0, color: Colors.white)),
)
整体啰嗦一遍：
const ButtonStyle({
this.textStyle, //字体
this.backgroundColor, //背景色
this.foregroundColor, //前景色
this.overlayColor, // 高亮色，按钮处于focused, hovered, or pressed时的颜色
this.shadowColor, // 阴影颜色
this.elevation, // 阴影值
this.padding, // padding
this.minimumSize, //最小尺寸
this.side, //边框
this.shape, //形状
this.mouseCursor, //鼠标指针的光标进入或悬停在此按钮的[InkWell]上时。
this.visualDensity, // 按钮布局的紧凑程度
this.tapTargetSize, // 响应触摸的区域
this.animationDuration, //[shape]和[elevation]的动画更改的持续时间。
this.enableFeedback, // 检测到的手势是否应提供声音和/或触觉反馈。例如，在Android上，点击会产生咔哒声，启用反馈后，长按会产生短暂的振动。通常，组件默认值为true。
});
常规的配置就这样了：
style: ButtonStyle(
tapTargetSize: MaterialTapTargetSize.shrinkWrap,
minimumSize: MaterialStateProperty.all(Size(0, 0)),
padding: MaterialStateProperty.all(EdgeInsets.zero),
shadowColor: MaterialStateProperty.all(Colors.transparent),
backgroundColor: MaterialStateProperty.all(Color(0xFFECB34D)),
textStyle: MaterialStateProperty.all(TextStyle(fontSize: 16.0, color: Colors.white)),
// elevation: MaterialStateProperty.all(0),
// splashFactory: NoSplash.splashFactory
)
但是，通常，我们并不单独配，我们要配到主题里。这样，在逻辑的其他地方，只需要简单的使用 button 就可以了。先配置在主题里。
ThemeData lightTheme = ThemeData.light().copyWith(
elevatedButtonTheme: ElevatedButtonThemeData(
style: ButtonStyle(
tapTargetSize: MaterialTapTargetSize.shrinkWrap,
minimumSize: MaterialStateProperty.all(Size(0, 0)),
padding: MaterialStateProperty.all(EdgeInsets.zero),
shadowColor: MaterialStateProperty.all(Colors.transparent),
backgroundColor: MaterialStateProperty.all(Color(0xFFECB34D)),
textStyle: MaterialStateProperty.all(TextStyle(fontSize: 16.0, color: Colors.white)),
// elevation: MaterialStateProperty.all(0),
// splashFactory: NoSplash.splashFactory
))
);
使用的时候：
SizedBox(
width: 120,
height: 40,
child: ElevatedButton(
onPressed: () {
},
child: Text(
"我是按钮",
),
))
如果想覆盖或增加主题的设置：
比如，这里加了一个 borderradius 。
SizedBox(
width: 120,
height: 40,
child: ElevatedButton(
style: ButtonStyle()
.copyWith(shape: MaterialStateProperty.all(RoundedRectangleBorder(borderRadius: BorderRadius.circular(40)))),
onPressed: () {
},
child: Text(
"我是按钮",
),
))
最后加一条。想让按钮自适应父容器。可以这个弄。
Container(
width: 750,
child: SizedBox(
width: double.infinity,
height: 92,
child: ElevatedButton()
)
)
SizedBox 能具体定义按钮的宽高，而 double.infinity 又不能突破 Container 的宽高。通常 Container 不是具体的宽高才会用到这种自适应的方式。
照片访问等
ios:
<key>NSCameraUsageDescription</key>
<string>Example usage description</string>
<key>NSMicrophoneUsageDescription</key>
<string>Example usage description</string>
<key>NSPhotoLibraryUsageDescription</key>
<string>Example usage description</string>
android:
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.CAMERA" />
<uses-permission android:name="android.permission.RECORD_AUDIO" />
SnackBars
用Flutter创建一个简单的SnackBar，你必须获得Scaffold的context，或者你必须使用一个GlobalKey附加到你的Scaffold上。
final snackBar = SnackBar(
content: Text('Hi!'),
action: SnackBarAction(
label: 'I am a old and ugly snackbar :(',
onPressed: (){}
),
);
// 在小组件树中找到脚手架并使用它显示一个SnackBars。
Scaffold.of(context).showSnackBar(snackBar);
默认情况下， flutter 的 macos，windows 等配置默认是没有开启的。也就是你 flutter create 的时候，不会生成其相关配置。好吧，那么来开启。
操作一波
# 看看 config 相关的设置
flutter config --help
# 开启操作
flutter config --enable-web
flutter config --enable-macos-desktop
flutter config --enable-windows-desktop
# 关闭操作
flutter config --no-enable-web
flutter config --no-enable-macos-desktop
flutter config --no-enable-windows-desktop
当然，如果之前已经创建了项目。可以进入项目目录中，使用 flutter create . 补充起来。
什么是UniversalLink
UniversalLink与URL Schemes一样，都是跳转APP的一种方式。
简单来说就是一个URL，当用户在浏览器中访问此URL时，苹果会检测对应的APP是否已安装。已安装则跳转到APP。未安装则访问此URL实际内容。
步骤
1、让后台人员准备一个https的链接，一定要https的(微信硬性要求)
2、制作 apple-app-site-association 文件，并放置在准备好的链接根目录下
3、App Store应用管理和Xcode开启Associated Domains，并填写对应Domains
4、用GET请求测试该链接下的文件内容，并在safari浏览器中测试
5、微信开放平台和SDK注册方法填写相同UniversalLink
6、填写微信新的LSApplicationQueriesSchemes
7、回调测试
具体操作
（1）服务端文件 apple-app-site-association 。json格式，而不需要任何后缀。
{
"applinks": {
"apps": [],
"details": [
{
"appID": "VQXXXXXD49G.XXX.XXXX.XXXX",
"paths": [ "/app/*"]
}
]
}
}
appID 有两部分组成，在苹果开发者平台的 "Certificates, Identifiers & Profiles" -> "All Identifiers" 选中对应的 id,进去就可以看见配置信息了。就是 App ID Prefix 和 Bundle ID 组成。
paths末尾必须是 * ，最好带一个前缀。免得域名被命中。结尾必须是 * 也是微信相关要求的。
上边这个文件传到服务根目录或根目录下的 .well-known 下。
（2）在苹果开发者账号上一步查看 App ID Prefix 和 Bundle ID 的地方，将 Associated Domains 前边打钩保存。
（3）如果涉及到微信登录，需要在开放平台中设置 Bundle ID 和 Universal Links。Bundle ID 和苹果账号中的Bundle ID 一致。Universal Links 可以定义为上一步中使用的服务域名 + paths 组成。比如: https://xxx/app/
(4) 上边的完成后，需要在 xcode 中配置一些信息。先在 ios/Runner/Info.plist 中加入以下配置：
<key>LSApplicationQueriesSchemes</key>
<array>
<string>weixin</string>
<string>weixinULAPI</string>
</array>
<key>NSAppTransportSecurity</key>
<dict>
<key>NSAllowsArbitraryLoads</key>
<true/>
</dict>
(5) 在 xcode 中配置 applinks。依次选择 Runner(Targets)->Signning & Capabilities->All 。在 All 的左边点击 Capability,选中并添加 Associated Domains。然后点击 + 号配置 Domains。比如： applinks:www.xxx.com (applinks 这个是固定不变的 www.xxx.com 是你的服务的地址。只需要域名即可。并且该域名无中间跳转)
（6) 在 xcode 中配置 appid。依次选择 Runner(Targets)->Info->URL Types。点击＋号，添加一个。在 URL Schemes 出填写微信开发平台中申请 app 接入的 appid，Role 为默认的 Editor 即可。其他不用填。
到此，基本的配置也算完成了。然后就是测试一下。他们喜欢添加一个记事本，写个Universal Links 链接，然后点击跳转到 safari 试试效果。我这样开始是失败的。反正上边的步骤来了好几次。后来，我直接打包成 app，在APP里调用微信登录。能呼起app 也有效果。也能返回。然后再点击记事本里的链接。直接跳转到 app，而不是进入 safari。证明之前的配置是有效果的。
相关
参考
水波纹效果用在导航栏中的确是很难看。就是想干掉。
bottomNavigationBar 去掉水波纹效果。
套一层 Theme 搞定
bottomNavigationBar: Theme(
data: ThemeData(
brightness: Brightness.light,
splashColor: Colors.transparent,
highlightColor: Colors.transparent,
),
child: BottomNavigationBar()
)
组件大全：
https://edu.csdn.net/learn/14065