Flutter学习-08- Flutter学习之常用控件

1.Text

class textDemo extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    const TextStyle _textStyle = TextStyle(
      fontWeight: FontWeight.bold,//加粗
      fontSize: 16,
      color: Colors.red,
      backgroundColor: Colors.grey,

    );

    return const Text(
      '金樽清酒斗十千，玉盘珍羞直万钱'
      '停杯投箸不能食，拔剑四顾心茫然'
      '欲渡黄河冰塞川，将登太行雪满山.'
      '闲来垂钓碧溪上，忽复乘舟梦日边。'
      '行路难！行路难！多歧路，今安在？'
      '长风破浪会有时⑹，直挂云帆济沧海。',
      style: _textStyle,

    );
  }
}

换行

return const Text(
  ''
  '金樽清酒斗十千，玉盘珍羞直万钱.\n'
      '停杯投箸不能食，拔剑四顾心茫然.\n'
  '欲渡黄河冰塞川，将登太行雪满山.\n'
  '闲来垂钓碧溪上，忽复乘舟梦日边。\n'
  '行路难！行路难！多歧路，今安在？\n'
  '长风破浪会有时⑹，直挂云帆济沧海。\n'
  '',
  style: _textStyle,

);

我们也可以使用''' 内容'''包裹展示多段，值得注意的是前面的空白也算内容的

return const Text(
      '''
      金樽清酒斗十千，玉盘珍羞直万钱,
      停杯投箸不能食，拔剑四顾心茫然
      欲渡黄河冰塞川，将登太行雪满山.'
      闲来垂钓碧溪上，忽复乘舟梦日边。'
      行路难！行路难！多歧路，今安在？'
      长风破浪会有时⑹，直挂云帆济沧海。''',
  style: _textStyle,

);

我们剧中展示的话可以使用Container包裹下Text，其次，通过 MediaQuery.of(context).size.width设置内容的宽度，当没有 WidgetsApp or MaterialApp 的时候，我们使用 MediaQuery.of(context) 来获取数据有问题。

    return Container(
      color: Colors.grey,


      child: const Text(
           '金樽清酒斗十千，玉盘珍羞直万钱,\n'
            '停杯投箸不能食，拔剑四顾心茫然.\n'
            '欲渡黄河冰塞川，将登太行雪满山.\n'
'闲来垂钓碧溪上，忽复乘舟梦日边.\n'
'行路难！行路难！多歧路，今安在?\n'
'长风破浪会有时，直挂云帆济沧海.\n',
        textAlign: TextAlign.center,
        style: _textStyle,


      ),
      padding:EdgeInsets.only(top: 50),
      width: MediaQuery.of(context).size.width,

    );
  }
}

我们在设置下文字的对齐方式，以及距离顶部50距离

2. Text.rich

我们标题通常是大写，作者小写我们使用Text.rich来表达，使用TextSpan来修饰，我们可以无限嵌套

class richDemo extends StatelessWidget {
  const richDemo({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {

    return Column(


      children:  [
        SizedBox(height: 10,),
       const Text.rich(TextSpan(
         children: [
           TextSpan(text: "《行路难》",style: TextStyle(fontSize: 25,color: Colors.black)),
           TextSpan(text: '__李白',style: TextStyle(fontSize: 16,color: Colors.lightBlue)),

        ],


        ),

    textAlign: TextAlign.center,
    ),
        SizedBox(height: 10,),
        textDemo(),

      ],


    );

  }
}

运行效果，我们可以调整一下使用SizedBox调整上下间距，我们使用Column来作为载体，关于Column后面会介绍。

3. Container

Container的英文是容器的意思，我们通常用来进行包裹调整间距的，对于视图有点类似我们iOS中的view。

class containerDemo extends StatelessWidget {


  @override
  Widget build(BuildContext context) {
    return Container(
      child: Icon(Icons.more),
      color: Colors.yellow,
    );
  }
}

一个最简单的container，通常我们使用child包裹我们要的内容，这里他的大小不设置的话默认子视图的大小，这里就是icon图标的大小。

我们设置下宽高，较为明显显示出了

• margin 通常来进行外边距的修饰，这里是这个黄色的container距离父视图四周都是50

• padding 通常调节该widget的子控件距离它的内间距，这里我们不使用all，我们用only构造方法，设置根据自己需要的调整。

4. ListView

ListView类似我们iOS中的的tableView，有所不同的是在flutter中listview可以水平方向和竖直方向布局，有2种创建方式

4.1 new 的方式创建

new创建的方式item 存放在children数组里面，这样我们可以创建一些数量不多的item。这样的场景通常是在一些数量比较少的列表中，比如我们的设置页面，个人中心页面等。类似我们iOS中静态cell。

class listViewDemo extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return   ListView(
      children:  const[
        ListTile(
          leading: Icon(Icons.home),
          title: Text('home'),
          subtitle:Text('home'),
        ),
        ListTile(
          leading: Icon(Icons.add),
          title: Text('add'),
          subtitle:Text('add'),
        )
        , ListTile(
          leading: Icon(Icons.more),
          title: Text('more'),
          subtitle:Text('more'),
        )
      ],
    );
  }
}

这里的ListTile是系统提供的快速创建的item的方式，其中leading（主导）、title（文本）、subtitle（副文本）等。 具体 ListTile 的使用细节，可以参考官方文档 我们可以使用水平布局

class listViewDemo extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return   ListView(
      scrollDirection: Axis.horizontal,
      itemExtent: MediaQuery.of(context).size.width/4,
      children:  [
        Container(
          color: Colors.red,
        ),

        Container(
          color: Colors.black,
        ),
        Container(
          color: Colors.yellow,
        ),
        Container(
          color: Colors.orange,
        ),
      ],
    );
  }
}

4.2 build方式创建

class listViewDemo extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
   return ListView.builder(

       itemCount: 10,
       itemBuilder: (BuildContext context,int index){


     return ListTile(title:
       Text('标题$index'),);

   });
  }
}

这种我们定义item，和itemCount

以上就是一些常用的控件，后面我们在学习项目中再学习。