Flutter 组件的使用技巧及遇到的各种问题

最新推荐文章于 2025-07-28 10:54:49 发布

哎尼玛的浪

最新推荐文章于 2025-07-28 10:54:49 发布

阅读量1.3k

点赞数 3

CC 4.0 BY-SA版权

文章标签： flutter 组件布局

本文链接：https://blog.youkuaiyun.com/qq_40788686/article/details/97904404

本文分享了使用Flutter进行UI设计的实用技巧，包括按钮渐变颜色、圆角、间距设置，解决文字溢出显示问题，实现圆角和圆形图片，以及ListView嵌套GridView等常见布局难题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

本人使用flutter组件所遇到的问题及解决方案，仅供参考

//button 渐变颜色圆角间距
Padding(
padding: const EdgeInsets.symmetric(horizontal: 40,vertical: 25),
child: RaisedButton(
onPressed: login,
textColor: Colors.white,
clipBehavior: Clip.hardEdge,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.all(Radius.circular(22.0))),
padding: const EdgeInsets.all(0.0),

child: Container(
width: double.infinity,
height: 44,
decoration: const BoxDecoration(
gradient: LinearGradient(
colors: <Color>[
Colors.deepOrangeAccent,
Colors.red,
Colors.redAccent,
],
),
),
padding: const EdgeInsets.symmetric(horizontal: 40,vertical: 10),
child: Container(
alignment: Alignment.center,
child: Text('立即申请',style: TextStyle(fontSize: 16),)),
),

),
),

==========================================================================================

//代替android的边距
new Container(height: 10.0,color: Colors.white,),
new Padding(padding: EdgeInsets.symmetric(vertical: 5.0)),//代表上下间距
//字体超出最大宽度省略
Container(//给Text外层套个Container设置下最大宽度
width: 60,
child: Text(
'。。。',
　　maxLines: 1,//最大显示行数
overflow: TextOverflow.ellipsis,
),
)

=============================================================================

实现圆角/圆形图片的几种方式
1、圆角
很多时候我们需要给图片设置圆角，那么在flutter中是怎么实现的呢？有很多种方法可以实现，下面我举两个例子：
使用裁剪来实现图片圆角：

new ClipRRect(
child: Image.network(
imageUrl,
scale: 8.5,
fit: BoxFit.cover,
),
borderRadius: BorderRadius.only(
topLeft: Radius.circular(20),
topRight: Radius.circular(20),
),
)

使用边框来实现图片圆角：

new Container(
width: 120,
height: 60,
decoration: BoxDecoration(
shape: BoxShape.rectangle,
borderRadius: BorderRadius.circular(10.0),
image: DecorationImage(
image: NetworkImage(imageUrl),
fit: BoxFit.cover),
),
)

需要注意的是，使用边框实现的时候要注意设置 fit 属性，不然效果也是有问题的，当然了你还可以使用 Material 组件来实现，这个大家可以自己去尝试。
2、圆形
圆形图片用得最多的应该是头像之类的，这种同样有多种方式可以实现，下面我也举两个例子：
使用裁剪实现圆形图片：

new ClipOval(
child: Image.network(
imageUrl,
scale: 8.5,
),
)

使用CircleAvatar来实现圆形图片：

new CircleAvatar(
backgroundImage: NetworkImage(imageUrl),
radius: 50.0,
)

+++++++++++++++++++++++++++++++++++++++++++++++++++

//跳转
Navigator.push(context,
MaterialPageRoute(builder: (context) => LoginActivity()));

++++++++++++++++++++++++++++++++++++++++++++++++++

//解决弹出键盘报错外层包裹
SingleChildScrollView

=====================================================

//给控件加点击事件，_onClick为定义的方法
return Container(
child: GestureDetector(
onTap: _onClick,//写入方法名称就可以了，但是是无参的
child: Text("dianji"),
),
);

=====================================================

//listview 嵌套 GridView 给GridView加标题
//嵌套问题禁止滑动，解决报错问题
physics: new NeverScrollableScrollPhysics(),//增加
shrinkWrap: true,//增加

       ListView.separated//添加分割线
       separatorBuilder: (BuildContext context, int index) {
return new Divider(
height: 1.0,
color: Colors.grey,
);
},

=====================================================

代码持续更新