Flutter开发(五)：Flutter布局与列表

最新推荐文章于 2024-08-01 15:30:00 发布

吴庆森

最新推荐文章于 2024-08-01 15:30:00 发布

阅读量776

点赞数

分类专栏： flutter开发文章标签： flutter

本文链接：https://blog.csdn.net/wuqingsen1/article/details/121015931

版权

本文详细介绍了Flutter中如何实现线性布局、相对布局，以及使用Row、Column、Stack等widget创建复杂布局。同时，展示了如何通过Container、Padding、Center等调整布局样式。此外，还涵盖了滑动组件ListView的使用，列表组件的动态更新和点击事件处理。通过对这些基础知识的掌握，读者可以更好地理解和应用Flutter进行界面设计。

摘要由CSDN通过智能技术生成

1.Flutter 中的线性布局(Android 中 LinearLayout)

在 Flutter 中，可以使用 Row (横向)和 Column (纵向) widget 来实现同样的效果：

void main() {
  runApp(MaterialApp(home: MyApp()));
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Row(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        Text('1'),
        Text('2'),
        Text('3'),
        Text('4'),
      ],
    );
  }
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        Text('1'),
        Text('2'),
        Text('3'),
        Text('4'),
      ],
    );
  }
}

2.Flutter 中的相对布局(Android 中 RelativeLayout)

在 Flutter 中，可以通过 Column、Row 和 Stack 的组合来实现相对布局的效果。

3.使用 widget 定义布局属性

在 Flutter 中，布局主要由专门设计用于提供布局的小部件定义，并结合控件 widget 及样式属性。

如，行和列 widgets 控制一个数组中的条目，并且将它们分别垂直和水平对齐。Container widget 控制一个布局的样式和属性，Center widget 负责将它的子 widget 居中。

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
        child: Column(
      children: <Widget>[
        Container(
          color: Colors.red,
          width: 100.0,
          height: 100.0,
        ),
        Container(
          color: Colors.blue,
          width: 100.0,
          height: 100.0,