机遇屋-Flutter布局和嵌套控件

Flutter布局和嵌套控件

作者：ych

### layout
#### column
![](https://img.jiyuwu.com/upload/article/2023/1/6EAD448D54C4ABB5858D99CC256A9EDC.png)
```
import 'package:flutter/material.dart';

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

@override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar:AppBar(
        centerTitle: true,
        title: const Text("练习布局",),
      ),
      body: Container(
      color:Colors.grey,
      child:Column(
        children: [
          Container(
            color: Colors.red,
            width: 100,
            height: 100,
          ),
          Container(
            color: Colors.green,
            width: 150,
            height: 100,
          ),
          Container(
            color: Colors.yellow,
            width: 100,
            height: 100,
          ),
        ],
      ),
    ),
    );
  }
}
```
#### row
![](https://img.jiyuwu.com/upload/article/2023/1/3B6B079576921414594B0A0201F860CA.png)
```
import 'package:flutter/material.dart';

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

@override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar:AppBar(
        centerTitle: true,
        title: const Text("练习布局",),
      ),
      body: Container(
      color:Colors.grey,
      child:Row(
        children: [
          Container(
            color: Colors.red,
            width: 100,
            height: 200,
          ),
          Container(
            color: Colors.green,
            width: 150,
            height: 100,
          ),
          Container(
            color: Colors.yellow,
            width: 100,
            height: 100,
          ),
        ],
      ),
      ),
    );
  }
}
```
#### Flex
![](https://img.jiyuwu.com/upload/article/2023/1/412C26760AB6F4EC78B6A214F4B7D268.png)
```
import 'package:flutter/material.dart';

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

@override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar:AppBar(
        centerTitle: true,
        title: const Text("练习布局",),
      ),
      body: Container(
        color:Colors.grey,
        child:Flex(
          direction: Axis.vertical,
          children: [
            Expanded(
              flex: 1,
              child: Container(
                color: Colors.red,
                width: 100,
                height: 200,
              ),
            ),
            Expanded(
              flex: 2,
              child: Container(
                color: Colors.green,
                width: 150,
                height: 100,
              ),
            ),
            Expanded(
              flex: 3,
              child: Container(
                color: Colors.yellow,
                width: 100,
                height: 100,
              ),
            ),
          ],
        ),
      ),
    );
  }
}
```
#### Wrap
![](https://img.jiyuwu.com/upload/article/2023/1/729C252ECEC4499C1BC6F05763517C32.png)
```
import 'package:flutter/material.dart';
class WrapDemo extends StatelessWidget {
  const WrapDemo({Key? key}) : super(key: key);

@override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar:AppBar(
        centerTitle: true,
        title: const Text("练习布局",),
      ),
      body:const MyWrap(),
    );
  }
}
class MyWrap extends StatefulWidget {
  const MyWrap({Key? key}) : super(key: key);

@override
  State<MyWrap> createState() => _MyWrapState();
}

class _MyWrapState extends State<MyWrap> {
  List<int> list=[];
  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    for(var i=0;i<20;i++){
      list.add(i);
    }
  }
  @override
  Widget build(BuildContext context) {
    return Wrap(
      direction: Axis.vertical,
      alignment: WrapAlignment.spaceAround,
      spacing: 1.0,
      runSpacing: 1.0,
      children: list.map((e) => Container(
        height: 100,
        width: 100,
        color: Colors.blue,
        child: Text(e.toString()),
      )).toList(),
    );
  }
}
```
#### stack
![](https://img.jiyuwu.com/upload/article/2023/1/085F21150B4DBAA5AFA72B3A3490A81A.png)
```
import 'package:flutter/material.dart';
class StackDemo extends StatelessWidget {
  const StackDemo({Key? key}) : super(key: key);

@override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar:AppBar(
        centerTitle: true,
        title: const Text("练习布局",),
      ),
      body:const MyStack(),
    );
  }
}

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

@override
  Widget build(BuildContext context) {
    return Stack(
      children: [
        Container(
          color: Colors.green,
          width: 100,
          height: 100,
        ),
        Container(
          color: Colors.red,
          width: 50,
          height: 100,
        ),
      ],
    );
  }
}
```
#### 定位positioned
![](https://img.jiyuwu.com/upload/article/2023/1/FF23241314AE263AA14A69F63497BEC8.png)
```
import 'package:flutter/material.dart';
class StackDemo extends StatelessWidget {
  const StackDemo({Key? key}) : super(key: key);

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

@override
  Widget build(BuildContext context) {
    return Stack(
      children: [
        Container(
          color: Colors.green,
          width: 100,
          height: 100,
        ),
        Container(
          color: Colors.red,
          width: 50,
          height: 100,
        ),
        Positioned(
          top: 10,
          bottom: 10,
          left: 10,
          right: 10,
          child: Container(
            color: Colors.yellow,
          ),
        ),
      ],
    );
  }
}
```

#### 相对定位Align
![](https://img.jiyuwu.com/upload/article/2023/1/345B19ED8CCAB55949D18ABB47FECFEA.png)
```
import 'package:flutter/material.dart';
class StackDemo extends StatelessWidget {
  const StackDemo({Key? key}) : super(key: key);

@override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar:AppBar(
        centerTitle: true,
        title: const Text("练习布局",),
      ),
      body:const AlignDemo(),
    );
  }
}

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

@override
  Widget build(BuildContext context) {
    return Container(
      width: 200,
      height: 200,
      color: Colors.green,
      child:const Align(
        child: FlutterLogo(
          size: 60,

),
      ),
    );
  }
}
```
#### 内外边距Padding和Margin
![](https://img.jiyuwu.com/upload/article/2023/1/E03AF596B392BE638DD8B142D0FA49A6.png)
```
import 'package:flutter/material.dart';
class LayoutDemo extends StatelessWidget {
  const LayoutDemo({Key? key}) : super(key: key);

@override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar:AppBar(
        centerTitle: true,
        title: const Text("练习布局",),
      ),
      body:const EdgeDemo(),
    );
  }
}

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

@override
  Widget build(BuildContext context) {
    return Container(
      width: 100,
      height: 100,
      color: Colors.red,
      margin:const EdgeInsets.all(10),//外边距
      padding:const EdgeInsets.all(20),//内边距
      child: const Text("data"),
    );
  }
}
```
#### 尺寸限制BoxConstains
```
import 'package:flutter/material.dart';
class LayoutDemo extends StatelessWidget {
  const LayoutDemo({Key? key}) : super(key: key);

@override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar:AppBar(
        centerTitle: true,
        title: const Text("练习布局",),
      ),
      body:const MyBoxDemo(),
    );
  }
}

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

@override
  Widget build(BuildContext context) {
    // return ConstrainedBox(
    //   constraints:const BoxConstraints(
    //     minHeight: 100,
    //     minWidth: 100,
    //     maxHeight: 200,
    //     maxWidth: 200,
    //   ),
    //   child: Container(
    //     width: 10,
    //     height: 10,
    //     color: Colors.green,
    //   ),
    // );
    return SizedBox(
      width: 100,
      height: 100,
      child: Container(
        width: 200,
        height: 10,
        color: Colors.yellow,
      ),
    );
  }
}
```

#### 装饰器DecoratedBox
![](https://img.jiyuwu.com/upload/article/2023/1/EAD9C901B44EA108C24262378F83B4AC.png)

```
import 'package:flutter/material.dart';
class LayoutDemo extends StatelessWidget {
  const LayoutDemo({Key? key}) : super(key: key);

@override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar:AppBar(
        centerTitle: true,
        title: const Text("练习布局",),
      ),
      body:const RegDemo(),
    );
  }
}

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

@override
  Widget build(BuildContext context) {
    return Container(
      width: double.infinity,
       margin:const EdgeInsets.all(20),
       child: DecoratedBox(
          decoration: BoxDecoration(
            gradient:const LinearGradient(colors: [
              Colors.red,
              Colors.orange,
              Colors.green,
            ]),
            borderRadius: BorderRadius.circular(10),
            boxShadow:const [
              BoxShadow(
                color: Colors.black45,
                offset: Offset(2.0, 2.0),
                blurRadius: 2,
              ),
            ],
          ),
          child:const Padding(padding: EdgeInsets.only(left: 100,right: 100,top: 20,bottom: 20),
            child: Text("注册",
              style: TextStyle(
                color: Colors.white,
              ),
              textAlign: TextAlign.center,
            ),

),
        ),
    );
  }
}
```

#### AppBar基本用法
![](https://img.jiyuwu.com/upload/article/2023/1/97401AA61635CC8266362557E956C16B.png)
```
import 'package:flutter/material.dart';
class LayoutDemo extends StatelessWidget {
  const LayoutDemo({Key? key}) : super(key: key);

#### 顶部选项卡TabBar
![](https://img.jiyuwu.com/upload/article/2023/1/960F4A9D03FCAE68A02DEA30E482F565.png)
```
import 'package:flutter/material.dart';
class PageDemo extends StatefulWidget {
  const PageDemo({Key? key}) : super(key: key);

@override
  State<PageDemo> createState() => _PageDemoState();
}

class _PageDemoState extends State<PageDemo> with SingleTickerProviderStateMixin {
  List tabs=["Flutter",".Net","Java","Golang"];
  TabController? _controller;
  int _index=0;

@override
  void initState() {
    // TODO: implement initState
    _controller= TabController(
      initialIndex: _index,
      length: tabs.length,
      vsync: this
    );
    _controller!.addListener(() {
      setState(() {
        if (!_controller!.indexIsChanging) {
          debugPrint(_controller!.index.toString());
          _index=_controller!.index;
        }
      });
    });
    super.initState();
  }

@override
  void dispose() {
    // TODO: implement dispose
    _controller?.dispose();
    super.dispose();
  }

@override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar:AppBar(
        leading: IconButton(
          icon:const Icon(Icons.home,color: Colors.black,),
          onPressed: (){
            debugPrint("leading");
          },
        ),
        centerTitle: true,
        backgroundColor: Colors.yellow,
        title: const Text("练习布局",style: TextStyle(
          color: Colors.black,
        ),),
        actions: [
          IconButton(onPressed: (){
            debugPrint("add");
          }, icon:const Icon(Icons.add,color: Colors.black,),
          ),
        ],
        elevation: 4,
        bottom: TabBar(
          controller: _controller,
          indicatorColor: Colors.blue,
            labelColor:Colors.black,
          tabs: tabs
            .map((e) => Tab(
          text: e,
        )).toList(),
        ),
      ),
      body: Text(_index.toString()),
    );
  }
}
```
#### 滑动tab
```
import 'package:flutter/material.dart';
// ignore: must_be_immutable
class PageDemo extends StatefulWidget {
  List<Widget> widgets=[
    const FlutterView(),
    const NetView(),
    const JavaView(),
  ];
  PageDemo({Key? key}) : super(key: key);

@override
  State<PageDemo> createState() => _PageDemoState();
}

class _PageDemoState extends State<PageDemo> with SingleTickerProviderStateMixin {
  List tabs=["Flutter",".Net","Java"];
  TabController? _controller;

@override
  void initState() {
    // TODO: implement initState
    _controller= TabController(
      length: tabs.length,
      vsync: this
    );
    super.initState();
  }

@override
  void dispose() {
    // TODO: implement dispose
    _controller?.dispose();
    super.dispose();
  }

@override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar:AppBar(
        leading: IconButton(
          icon:const Icon(Icons.home,color: Colors.black,),
          onPressed: (){
            debugPrint("leading");
          },
        ),
        centerTitle: true,
        backgroundColor: Colors.yellow,
        title: const Text("练习布局",style: TextStyle(
          color: Colors.black,
        ),),
        actions: [
          IconButton(onPressed: (){
            debugPrint("add");
          }, icon:const Icon(Icons.add,color: Colors.black,),
          ),
        ],
        elevation: 4,
        bottom: TabBar(
          controller: _controller,
          indicatorColor: Colors.blue,
            labelColor:Colors.black,
          tabs: tabs
            .map((e) => Tab(
          text: e,
        )).toList(),
        ),
      ),
      body:TabBarView(controller: _controller,children: widget.widgets,),
    );
  }
}

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

@override
  Widget build(BuildContext context) {
    return const Center(
      child: Text("Flutter"),
    );
  }
}

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

@override
  Widget build(BuildContext context) {
    return  const Center(
      child: Text("Net"),
    );
  }
}

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

@override
  Widget build(BuildContext context) {
    return  const Center(
      child: Text("Java"),
    );
  }
}
```
#### 抽屉Drawer
![](https://img.jiyuwu.com/upload/article/2023/1/80D147FD85B7DF9BB0A4C9B49D8E6F1C.gif)
```
import 'package:flutter/material.dart';
// ignore: must_be_immutable
class PageDemo extends StatefulWidget {
  List<Widget> widgets=[
    const FlutterView(),
    const NetView(),
    const JavaView(),
  ];
  PageDemo({Key? key}) : super(key: key);

@override
  State<PageDemo> createState() => _PageDemoState();
}

class _PageDemoState extends State<PageDemo> with SingleTickerProviderStateMixin {
  List tabs=["Flutter",".Net","Java"];
  TabController? _controller;

@override
  void initState() {
    // TODO: implement initState
    _controller= TabController(
      length: tabs.length,
      vsync: this
    );
    super.initState();
  }

@override
  void dispose() {
    // TODO: implement dispose
    _controller?.dispose();
    super.dispose();
  }

@override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar:AppBar(
        // leading: IconButton(
        //   icon:const Icon(Icons.home,color: Colors.black,),
        //   onPressed: (){
        //     debugPrint("leading");
        //   },
        // ),
        centerTitle: true,
        backgroundColor: Colors.yellow,
        title: const Text("练习布局",style: TextStyle(
          color: Colors.black,
        ),),
        actions: [
          IconButton(onPressed: (){
            debugPrint("add");
          }, icon:const Icon(Icons.add,color: Colors.black,),
          ),
        ],
        elevation: 4,
        bottom: TabBar(
          controller: _controller,
          indicatorColor: Colors.blue,
            labelColor:Colors.black,
          tabs: tabs
            .map((e) => Tab(
          text: e,
        )).toList(),
        ),
      ),
      drawer: MyDrawer(),
      body:TabBarView(controller: _controller,children: widget.widgets,),
    );
  }
}

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

@override
  Widget build(BuildContext context) {
    return const Center(
      child: Text("Flutter"),
    );
  }
}

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

@override
  Widget build(BuildContext context) {
    return  const Center(
      child: Text("Net"),
    );
  }
}

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

@override
  Widget build(BuildContext context) {
    return  const Center(
      child: Text("Java"),
    );
  }
}

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

@override
  Widget build(BuildContext context) {
    return Drawer(
      child: MediaQuery.removePadding(context: context, child: Column(
        crossAxisAlignment: CrossAxisAlignment.center,
        children:const [
          Padding(padding: EdgeInsets.only(top:40),
          child: Text("data"),
          ),
        ],
      )),
    );
  }
}
```
#### 底部选项卡BottomNavigationBar

```
import 'package:flutter/material.dart';
class BottomNavigatorBarDemo extends StatefulWidget {
  const BottomNavigatorBarDemo({Key? key}) : super(key: key);

@override
  State<BottomNavigatorBarDemo> createState() => _BottomNavigatorBarDemoState();
}

class _BottomNavigatorBarDemoState extends State<BottomNavigatorBarDemo> {
  int _index=0;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        centerTitle: true,
        title: const Text("底部选项卡"),
      ),
      bottomNavigationBar: BottomNavigationBar(
        items:const [
          BottomNavigationBarItem(
            icon: Icon(Icons.add),
            label: "新增",
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
            label: "我的",
          ),
        ],
        currentIndex: _index,
        onTap: (v){
          setState(() {
            _index=v;
          });
        },
      ),
      body: Center(
        child: Text(_index.toString()),
      ),
    );
  }
}
```
组合
![](https://img.jiyuwu.com/upload/article/2023/1/CC7365A0BA8BFFBE40A77FF752C8316D.png)
```
import 'package:flutter/material.dart';
import 'layout_demo.dart';

import 'demo1.dart';
class BottomNavigatorBarDemo extends StatefulWidget {
  List<Widget> widgets=[
    PageDemo(),
    TextDemo(),
  ];
   BottomNavigatorBarDemo({Key? key}) : super(key: key);

@override
  State<BottomNavigatorBarDemo> createState() => _BottomNavigatorBarDemoState();
}

#### 浮动按钮 FloatingActionButton
```
      floatingActionButton: FloatingActionButton(
          child:const Icon(Icons.widgets_rounded),
          onPressed: (){
            debugPrint("floatingActionButton");
          }
      ),
      body: Center(
        child: widget.widgets[_index],
      ),
```
[更多介绍](https://www.cnblogs.com/yuyujuan/p/11054770.html "更多介绍")

#### 滚动列表
```
import 'package:flutter/material.dart';

class ListviewDemo extends StatefulWidget {
  const ListviewDemo({Key? key}) : super(key: key);

@override
  State<ListviewDemo> createState() => _ListviewDemoState();
}

class _ListviewDemoState extends State<ListviewDemo> {
  List<int> list=[];
  
  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    for(var i=0;i<100;i++){
      list.add(i);
    }
  }
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        centerTitle: true,
        title:const Text("滚动列表"),
      ),
      body: Scrollbar(
        child: ListView(
          children:list.map((e) => Text(e.toString())).toList(),
        ),
      ),
    );
  }
}
```
#### 上拉延迟
```
import 'package:flutter/material.dart';

class ListviewDemo extends StatefulWidget {
  const ListviewDemo({Key? key}) : super(key: key);

@override
  State<ListviewDemo> createState() => _ListviewDemoState();
}

class _ListviewDemoState extends State<ListviewDemo> {
  List<int> list=[];
  
  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    for(var i=0;i<100;i++){
      list.add(i);
    }
  }
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        centerTitle: true,
        title:const Text("滚动列表"),
      ),
      body: Scrollbar(
        child: RefreshIndicator(
          child: ListView(
            children:list.map((e) => Text(e.toString())).toList(),
          ),
          onRefresh: _onRefresh,
        ),
      ),
    );
  }

Future _onRefresh() async{
   await Future.delayed(
     const Duration(seconds: 3),
        (){
        debugPrint("object");
        },
    );
   return "";
  }
}
```
#### 下滑出现，上滑消失
![](https://img.jiyuwu.com/upload/article/2023/1/1E5951660CF034A78FF072C4106B1A36.gif)
```
import 'package:flutter/material.dart';

class ListviewDemo extends StatefulWidget {
  const ListviewDemo({Key? key}) : super(key: key);

@override
  State<ListviewDemo> createState() => _ListviewDemoState();
}

class _ListviewDemoState extends State<ListviewDemo> {
  List<int> list=[];
  ScrollController _controller=ScrollController();
  bool show=false;
  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    _controller=ScrollController();
    _controller.addListener(() {
      debugPrint(_controller.offset.toString());
      if(_controller.offset>=100&&!show){
        setState(() {
          show=true;
        });
      }else if(_controller.offset<100&&show){
        setState(() {
          show=false;
        });
      }
    });
    for(var i=0;i<100;i++){
      list.add(i);
    }
  }

@override
  void dispose() {
    // TODO: implement dispose
    super.dispose();
    _controller.dispose();
  }

@override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        centerTitle: true,
        title:const Text("滚动列表"),
      ),
      floatingActionButton:show? FloatingActionButton(
        child:const Icon(Icons.ac_unit_sharp),
        onPressed: (){},
      ):null,
      body: Scrollbar(
        child: ListView.builder(itemBuilder:
        (BuildContext context,int index){
          if(index==23){
            return const Icon(Icons.account_balance_wallet);
          }
          return Text(list[index].toString());
        },
          itemCount: list.length,
          controller: _controller,
        ),
      ),
    );
  }
}
```

#### 网格布局GridView
![](https://img.jiyuwu.com/upload/article/2023/1/9292F1B333DBD7E69DAE2F5EFB8EEF12.png)
```
import 'package:flutter/material.dart';
class GridViewDemo extends StatelessWidget {
  const GridViewDemo({Key? key}) : super(key: key);

@override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        centerTitle: true,
        title: const Text("网格布局"),
      ),
      body: GridView(
        gridDelegate:const SliverGridDelegateWithFixedCrossAxisCount(
          crossAxisCount: 3,
        ),
        children:const [
          Icon(Icons.add),
          Icon(Icons.home),
          Icon(Icons.vaccines),
          Icon(Icons.g_translate),
          Icon(Icons.javascript),
          Icon(Icons.cabin),
          Icon(Icons.car_crash),
          Icon(Icons.dashboard),
          Icon(Icons.network_wifi),
          Icon(Icons.clean_hands),
        ],
      ),
    );
  }
}
```

#### 弹窗AlertDialog
```
import 'package:flutter/material.dart';

class AlertDialogDemo extends StatefulWidget {
  const AlertDialogDemo({Key? key}) : super(key: key);

@override
  State<AlertDialogDemo> createState() => _AlertDialogDemoState();
}

class _AlertDialogDemoState extends State<AlertDialogDemo> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        centerTitle: true,
        title: const Text("弹框演示"),
      ),
      body: Column(
        children: [
          ElevatedButton(
            onPressed: _showAlert,
            child: const Text("对话框"),
          )
        ],
      ),
    );
  }
  void _showAlert() async {
     var result=await showDialog(context: context, builder:
     (BuildContext context){
       return AlertDialog(
         title:const Text("标题"),
         content:const Text("确认删除吗？"),
         actions: [
           TextButton(
             onPressed: (){
               Navigator.of(context).pop(true);
             },
             child:const  Text("确认"),
           ),
           TextButton(
             onPressed: (){
               Navigator.pop(context,false);
             },
             child: const Text("取消"),
           ),
         ],
       );
     }
     );
     debugPrint(result.toString());
  }
}
```

#### 表格1
![](https://img.jiyuwu.com/upload/article/2023/1/25AD251D07B14169F105AFB4D00CDEF3.png)
```
import 'package:flutter/material.dart';

class TableDemo extends StatefulWidget {
  const TableDemo({Key? key}) : super(key: key);

@override
  State<TableDemo> createState() => _TableDemoState();
}

class _TableDemoState extends State<TableDemo> {
  List<Map> list=[];

@override
  void initState() {
    // TODO: implement initState
    super.initState();
    for(var i=0;i<10;i++){
      list.add({
        "name":"liu$i",
        "gender":i%1==0?"男":"女",
      });
    }
  }

@override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        centerTitle: true,
        title: const Text("表格演示"),
      ),
      body: Padding(
        padding:const EdgeInsets.all(10),
        child: Table(
          border: TableBorder.all(
            color: Colors.grey,
          ),
          children: list.map((e) => TableRow(
            children:[
              Text(e["name"]),
              Text(e["gender"]),
            ],)).toList(),
        ),
      ),
    );
  }
}
```
#### 表格2
![](https://img.jiyuwu.com/upload/article/2023/1/E3F07E336BF7306BFA355E9E78E3E75A.png)
```
import 'package:flutter/material.dart';

class TableDemo extends StatefulWidget {
  const TableDemo({Key? key}) : super(key: key);

@override
  State<TableDemo> createState() => _TableDemoState();
}

class _TableDemoState extends State<TableDemo> {
  List<Map> list=[];

@override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        centerTitle: true,
        title: const Text("表格演示"),
      ),
      body: Padding(
        padding:const EdgeInsets.all(10),
        child:DataTable(
          columns:const [
            DataColumn(label: const Text("姓名"),
            ),
            DataColumn(label: const Text("性别"),
            ),
          ],
          rows: list.map((e) => DataRow(
              cells: [
            DataCell(Text(e["name"])),
            DataCell(Text(e["gender"])),
          ],
          ),
          ).toList(),
        ),
      ),
    );
  }
}
```
#### 排序
![](https://img.jiyuwu.com/upload/article/2023/1/9C255EBAD82488DFBB457CC771DA85DE.png)
```
import 'package:flutter/material.dart';

class TableDemo extends StatefulWidget {
  const TableDemo({Key? key}) : super(key: key);

@override
  State<TableDemo> createState() => _TableDemoState();
}

class _TableDemoState extends State<TableDemo> {
  List<Map> list=[];
  int _sortColumnIndex=0;
  bool _sortAscending=true;
  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    for(var i=1;i<10;i++){
      list.add({
        "name":"l"*i,
        "gender":i%2==0?"男":"女",
        "select":false,
        "age":i,
      });
    }
  }

@override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        centerTitle: true,
        title: const Text("表格演示"),
      ),
      body: Padding(
        padding:const EdgeInsets.all(10),
        child:DataTable(
          // onSelectAll: (v){
          //   for(var i=0;i<list.length;i++){
          //     setState(() {
          //       if(list[i]["select"]!=v){
          //         list[i]["select"]=v;
          //       }
          //     });
          //   }
          // },
          sortColumnIndex: _sortColumnIndex,
          sortAscending: _sortAscending,
          columns: [
            DataColumn(label:const Text("姓名"),
              onSort: (columnIndex,ascending){
                setState(() {
                  _sortColumnIndex=columnIndex;
                  _sortAscending=ascending;
                  list.sort((a,b){
                    if(!ascending){
                      var c=a;
                      a=b;
                      b=c;
                    }
                    return a["name"].toString().length.compareTo(b["name"].toString().length);
                  });
                });
              },
            ),
             DataColumn(label: Text("年龄"),
              onSort: (columnIndex,ascending){
                setState(() {
                  _sortColumnIndex=columnIndex;
                  _sortAscending=ascending;
                  list.sort((a,b){
                    if(!ascending){
                      var c=a;
                      a=b;
                      b=c;
                    }
                    return a["age"].compareTo(b["age"]);
                  });
                });
              },
            ),
            const DataColumn(label: Text("性别"),
            ),
          ],
          rows: list.map((e) => DataRow(
            selected: e["select"],
              onSelectChanged: (v){
              setState(() {
                if(e["select"]!=v){
                  e["select"]=v;
                }
              });
              },
              cells: [
            DataCell(Text(e["name"])),
            DataCell(Text(e["age"].toString())),
            DataCell(Text(e["gender"])),
          ],
          ),
          ).toList(),
        ),
      ),
    );
  }
}
```
![](https://img.jiyuwu.com/upload/article/2023/1/6EF29F17F6B970B0B0E84C6BEB95D083.png)
```
import 'package:flutter/material.dart';
class CardDemo extends StatefulWidget {
  const CardDemo({Key? key}) : super(key: key);

@override
  State<CardDemo> createState() => _CardDemoState();
}

class _CardDemoState extends State<CardDemo> {
  List<Map> list=[];
  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    for(var i=0;i<10;i++){
      list.add({
        "age":10+i,
        "name":"yin$i"});
    }
  }

Widget _itemBuilder(BuildContext context,int index){
    return Card(
      shadowColor: Colors.cyan,
      elevation: 10.0,
      child: Column(
        children: [
         const SizedBox(height: 8),
          Text(list[index]["name"]),
          const SizedBox(height: 8),
          Text(list[index]["age"].toString()),
          const SizedBox(height: 8),
        ],
      ),
    );
  }

@override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        centerTitle: true,
        title: const Text("卡片视图"),
      ),
      body: Padding(padding:EdgeInsets.all(10) ,
      child: ListView.builder(itemBuilder: _itemBuilder,itemCount: list.length,)
      // ListView(
      //   children: [
      //     Card(
      //       child: Container(
      //         width: double.infinity,
      //         height: 200,
      //       ),
      //     ),
      //   ],
      // ),
      ),
    );
  }
}
```
[card](https://yiibai.com/flutter/flutter-card.html "card")
[card-api](https://api.flutter.dev/flutter/material/Card-class.html "card-api")

#### 标题卡片
![](https://img.jiyuwu.com/upload/article/2023/1/3D6C775ABC10A2CDB1B2F87A381C1EBC.png)
```
      child: //ListView.builder(itemBuilder: _itemBuilder,itemCount: list.length,)
      ListView(
        children:const [
          ListTile(
            leading: Icon(Icons.home),
            title: Text("title"),
            tileColor: Colors.black12,
            subtitle: Text("subtitle"),
            trailing: Icon(Icons.wallet),
          ),
        ],
      ),
```

评论区

先去登录

Flutter布局和嵌套控件

相关推荐

评论区