Flutter学习笔记（持续更新）

最新推荐文章于 2024-07-16 00:12:29 发布

原创最新推荐文章于 2024-07-16 00:12:29 发布 · 286 阅读

0 ·

CC 4.0 BY-SA版权

Flutter 专栏收录该内容

2 篇文章

订阅专栏

Flutter学习笔记
首先打开Flutter官网https://flutter.dev/，开始学习，按照官网的指引搭建Flutter开发环境。（此处略过）

Flutter基础

在创建UI时在网上查了一些资料，整理下来，方便以后开发中使用。

包含不同style的文本组成：

			RichText(
			  text: TextSpan(
				text:'',
				children: <TextSpan>[]
			  ),
            ),

如果想让文本显示一行，一行显示不完使用省略号，添加这个属性：

overflow:TextOverflow.ellipsis,

隐藏Widget的方法

new Opacity(opacity: 0.0, child: new Padding(
              padding: const EdgeInsets.only(
                left: 16.0,
              ),
              child: new Icon(pencil, color: CupertinoColors.activeBlue),
            ))

添加点击事件

GestureDetector(
        onTap: () {
          print('onTap called.');
        },
        child: Text('onClick'),),

添加横线或竖线（分割线）

Container(
        height: 1.0,
        color: Color(0xffe0e0e0),
        margin: const EdgeInsets.only(left: 10.0, right: 10.0), //其实这里不需要设置margin
  ),

修改toolbar背景色，修改primarySwatch:Colors.blue

 MaterialApp(
      title: '标题',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
          primaryColor: Colors.white
      ),
        home: _buildMyWidget(),
    );

某个Widget设置圆角矩形边框，使用BoxDecoration。
实现水平方向展示一行文本，文本底部基线对齐，对齐详细参考：https://medium.com/jlouage/flutter-row-column-cheat-sheet-78c38d242041

crossAxisAlignment: CrossAxisAlignment.baseline,
	textBaseline: TextBaseline.alphabetic,

Flutter学习资料
https://github.com/yang7229693/flutter-study